Question

我第一次在我的React应用程序中使用semantic-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-React，如何使用所需的样式？我是否需要添加一些menu.variables或menu.overrides等？

Answer 1

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

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

语义UI，如何自定义菜单样式？

1 个答案: