Question

我正在使用Semantic UI React并试图找出覆盖默认样式的最佳方法，以便我可以更改卡片的外观和整个主题。

选项1似乎是定义我的CSS，并在每条规则后加！important，这不是很好。

选项2是主题支持，听起来像我想要的，除了我无法确定如何开始使用。我的应用程序使用CRA，在更改Webpack配置文件（我没有一个文件），2017年过时的博客文章建议我安装一堆目的不明确的模块之间，我在文档中有些失落和theming site itself（建议我定义灵活的变量文件）（我喜欢这种方法）。

虽然我无法确定为什么我的主题文件没有被提取，但似乎有必要进行某种主题的构建修复，主题指南未对此进行介绍。

在使用CRA构建过程时使主题工作的最佳方法是什么？（./node_modules/.bin/react-scripts build）

Answer 1

实际上，除非您确实非常有经验，否则永远不要使用!important。除了使您的样式看起来很丑外，使所有样式!important

由于您提到了支持SCSS模块的CRA，所以我可以告诉您，还有第三种选择，我认为更好。

这里分3个简单步骤：

1。将ID设置在层次结构中较高的位置。我是在body标签上的public/index.html中完成的：

// public/index.html

...
  <body id='app'>
...

2。创建一个SCSS模块文件，并将所有类包装在:global(#app)

中

// src/page.module.scss

:global(#app) {
  .container {
    padding: 2rem;
  }
  .button {
    font-size: 3em;
  }

}

3。导入样式并将其传递给语义组件

// src/page.jsx

import React from 'react';
import { Button, Container } from 'semantic-ui-react';
import styles from './page.module.scss'

const Page = () => (
  <Container className={styles.container}>
    <Button className={styles.button} />
  </Container>
)

之所以可行，是因为page.module.scss SCSS模块的输出将被编译为此：

#app .page_container_2oYQ {
  padding: 2rem;
}

#app .page_button_2oYQ {
  font-size: 3em;
}

如您所见，它将在模块化的类名之前添加#app id选择器，这将增加选择器的特殊性，从而覆盖语义UI。

Answer 2

专业为王。存在内联样式并且库没有提供以某种方式关闭属性的方式（糟糕的体系结构选择）时，只需要使用!important就可以了。

以下选择器类型列表按其特异性增加：

类型选择器（例如h1）和伪元素（例如::: before）。

类选择器（例如.example），属性选择器（例如   [type =“ radio”]）和伪类（例如：hover）。

ID选择器（例如，   #example）。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

看看语义UI here的第一个UI Button，它由以下HTML组成：

<button class="ui button">Click Here</button>

CSS通过语义.min.css附加：

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

要覆盖字体颜色，我们要做的就是编写一个比该选择器更具体的选择器。我们可以通过将它们的两个类选择器（同样特定）与类型选择器（附加特定性）结合起来来实现这一目标。

这看起来像：

button.ui.button {
  color: red;
}

现在，由于button.ui.button比页面.ui.button更具体地描述了元素在页面（DOM）中的位置，因此向浏览器发出信号，该样式应覆盖先前的声明。这是自定义主题的常用方法。

很棒的文档在这里： https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

button.ui.button {
  color: red;
}

<button class="ui button">Click Here</button>

Answer 3

当您具有来自语义ui，引导程序，角度材料ui等的CSS文件时，仅举几例。如果要覆盖任何元素的css，则在HTML中呈现或放置css文件的顺序将确定优先级。

为使您的css文件覆盖某些其他css文件，请在底部列出您的css文件。当然，请确保您的css选择器定位您要覆盖的元素。

一张图片值一千字

假设您要在语义ui中覆盖以下内容

<!-- from semantic-ui.min.css file or cdn -->
@media only screen and (min-width: 1200px) {
  .ui.container {
    max-width: 768px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

<!--override in my-custom-ui.css file --->

@media only screen and (min-width: 1200px) {
  .ui.container {
    max-width: 360px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

<!--this is where precedence is set, the last css file has the highest precedence-->
<!DOCTYPE html>
<html lang="en">
<head>
 <title>my title</title>
 <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"
    />

<!-- place your css file containing css overridden for semantic ui elements or other css at the bottom -->
<link rel="stylesheet" href="my-custom-ui.css" />
</head>
<body>
<header>
 My header
</header>
<content>
 My content
</content>
<footer>
 My footer
</footer>
</body
<script/>
</html>

语义ui反应中的覆盖样式

3 个答案: