代码之家 › 专栏 › 技术社区 › stone rock

如何在现有的物化css按钮和导航栏中添加自定义css样式?

materialize reactjs css html javascript

stone rock · 技术社区 · 6 年前

我对css的具体化还很陌生。我制作了一个导航栏,它有4个 li 标签,其中一个包含按钮。现在我想更改导航栏的背景颜色,并调整按钮大小。如何更改导航栏的默认颜色(红色)和按钮的默认颜色?我还想调整按钮的大小。如何做到这一点?

标题。js公司:

import React, { Component } from 'react';

class Header extends Component {

  render() {
    return (
      <div>   
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo">Udacity Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#">Nanodegree</a></li>
                <li><a href="#">Hire Talent</a></li>
                <li><a href="#">For Business</a></li>
                <li><a class="waves-effect waves-light btn">Course Finder</a></li>
              </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Header;

我应该在标题中添加什么。css?

屏幕截图:

1 回复 | 直到 6 年前

brk 6 年前

尝试将类添加到 nav 喜欢 <nav class="yourClassName"> 并在此css类中设置颜色

.yourClassName{
   background:colorName
}

类似地,在此处添加另一个类

<li><a class="waves-effect waves-light btn customClass">Course Finder</a></li>

.customClass{
   width:xxpx
}

如果未覆盖默认属性,请使用 !important

推荐文章

jfix · 具体化CSS-如何将颜色修改与NPM模块分开?

6 年前

HovSky · jQuery选项卡检查类未检查类

6 年前

TingAlex · 如何在不使用jquery的情况下使用字符计数初始化materialize textarea?

6 年前

NeuronButter · 固定操作按钮工作不正常?

6 年前

TurtleWolfe · 删除模式是否会被React路由器劫持?

6 年前

Stypan Zdesevich · 选择Materialiecscscss

6 年前

skr · 在html页面中使用materialize css时不呈现复选框

6 年前

Jeffrey04 George · 在渲染后反应中对DOM节点运行装饰功能

6 年前

frankwolffnl · 只有在响应模式下,按钮才显示图标。(html/css/materialize)

6 年前

stone rock · 如何在现有的物化css按钮和导航栏中添加自定义css样式?

6 年前