Semantic UI，如何自定义菜单样式？答案

【问题标题】：Semantic UI, how to customize menu styles?Semantic UI，如何自定义菜单样式？
【发布时间】：2018-04-02 19:40:52
【问题描述】：

我第一次在我的 React 应用程序中使用语义 UI，我正在使用的确切包：https://react.semantic-ui.com/collections/menu

我正在使用这样的方式渲染我的标题：

  <Menu
    className='header'
  >
    <Container>

使用 scss 导入样式标题，如下所示：

.header {
  background:
    linear-gradient(
      to left,
      rgba(100,97,240,1) 0%,
      rgba(255,203,0,1) 100%
    )
    left
    bottom
    #FFF
    no-repeat;
    background-size:100% 4px;
}

React 正在像这样渲染组件：

<div class="ui header menu">
    <div class="ui container">
       ....

问题是导入 SCSS 文件中的 .header 样式被忽略。虽然我确信我可以在我的 css 文件中添加 !important，但这感觉与 Semantic UI 做的事情是错误的，我想了解正确的方法。

使用 Semantic-UI-React，我如何使用所需的样式？我需要添加一些 menu.variables 或 menu.overrides 等吗？

【问题讨论】：

标签： css reactjs semantic-ui semantic-ui-react

【解决方案1】：

我不确定您是否可以使用 className 自定义 css。您可以将样式道具用于自定义 css。您可以使用本指南自定义默认样式： React Semantic-UI customized

另外，如果您遇到任何生成 semantic.min.css 的问题文件你可以参考这个问题：gulp build is not building semantic.min.css

【讨论】：