SemanticUI，如何自定义菜单样式？

Question

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

我正在渲染我的 header 使用如下：

  <Menu
    className='header'
  >
    <Container>

使用 scss 导入样式 header 如下所示：

.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，但感觉与语义 UI 做错了事，我想了解正确的方法。

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

Answer 1

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

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

SemanticUI，如何自定义菜单样式？

Semantic UI, how to customize menu styles?

css

reactjs

semantic-ui

semantic-ui-react