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

石岩石

我是实现CSS的新手。我制作了一个具有4个li标签的导航栏,其中一个包含按钮。现在,我想更改导航栏的背景颜色,并且应该调整按钮的大小。如何更改导航栏的默认颜色(红色)和按钮的默认颜色,以及我想调整按钮的大小。如何完成?

header.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;

我应该在header.css中添加什么?

屏幕截图:

在此处输入图片说明

brk

尝试在该CSS类中添加一个nav喜欢的类<nav class="yourClassName">并设置颜色

.yourClassName{
   background:colorName
}

Simillary在这里添加另一个类

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

.customClass{
   width:xxpx
}

如果默认属性不被覆盖使用 !important

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在魅力报告中附加自定义/现有的屏幕截图?

在JavaFX中向按钮添加自定义CSS

如何使用现有的自定义主题隐藏XML活动的标题栏

如何在导航栏上添加自定义视图

自定义导航栏样式-iOS

如何在自定义的tinymce下拉菜单中添加工具栏按钮?

如何在Android的自定义标题栏中添加菜单和设置选项?

如何在JavaFX CSS中创建自定义边框样式?

如何使用物化CSS将带有图标的搜索框添加到导航栏?

如何将自定义AxisItem添加到现有的PlotWidget?

如何在rmarkdown的导航栏标题字段中添加自定义徽标?

如何在操作栏上添加自定义按钮?

如何在NativeScript中创建自定义导航栏?

如何使用现有的线框主题将自己的CSS添加到Sitecore SXA自定义组件中?

如何在导航栏中包含自定义开关

如何在小吃栏中自定义动作按钮的样式

如何在导航栏中添加图像和按钮设计?

如何在swiftui中自定义导航栏

在导航栏按钮项中添加自定义图像时丢失Segue Action

自定义现有的按钮MS Dynamics CRM

如何在Xcode项目中添加和删除现有的自定义键盘扩展?

如何在Cast SDK V3中为投射按钮添加自定义样式?

在 Rails 中添加 CSS 自定义样式失败

如何在 TCPDF 中添加带有样式的自定义页脚

如何在 React 中设置自定义 css 样式?

如何在nextjs中添加自定义Css

如何在 CSS 中自定义导航栏中的某些项目?

带有 css 的 Svelte 自定义按钮组件或样式

如何应用现有样式并在其上添加可自定义的样式?