语义 ui 中的覆盖样式反应

Question

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

选项 1 似乎是定义我的 CSS 并将 !important 放在每个规则之后，这不是很好。

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

我无法确定为什么我的主题文件没有被拾取，而且似乎需要某种构建修复，但主题指南未涵盖。

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

Answer 1

具体为王。只有当存在内联样式并且库没有公开以某种方式关闭属性的方法（糟糕的体系结构选择）时，才需要使用 !important。

The following list of selector types increases by specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g., #example).

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

看看第一个 UI 语义按钮 UI here，由以下 HTML:

组成

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

CSS 通过 semantic.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;
}

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

这看起来像：

button.ui.button {
  color: red;
}

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

这里有很棒的文档： 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 2

当您从语义 ui、bootstrap、angular material ui 等获得 CSS 文件时，仅举几例。当您想覆盖任何元素的 css 时，您在 html 中呈现或放置 css 文件的顺序决定了优先级。

要让您的 css 文件覆盖其他 css 文件，请在底部列出您的文件。当然，请确保您的 css 选择器以您要覆盖的元素为目标。

一张图片胜过1000字

假设您想从语义 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>

Answer 3

实际上你不应该使用 !important 除非你真的也用过。除了让你的风格看起来很丑之外，把你所有的风格都做成是非常糟糕的做法!important

既然你提到了支持 SCSS 模块的 CRA，我可以告诉你，还有第三种选择，我认为它更好一些。

只需 3 个简单步骤即可完成：

1.在层次结构的较高位置设置一个 id。我在 body 标签的 public/index.html 中做：

// public/index.html

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

2。创建一个 SCSS 模块文件并将所有 classes 包装在 :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;
}

如您所见，它将在模块化 class 名称之前添加 #app id 选择器，这将增加您的选择器的特异性，这反过来将覆盖语义-ui个。

语义 ui 中的覆盖样式反应

Overriding styles in semantic ui react

css

semantic-ui-react