覆蓋語義 ui 中的樣式反應
[英]Overriding styles in semantic ui react
問題描述
我正在使用Semantic UI React並試圖找出覆蓋默認樣式的最佳方法，以便我可以更改卡片的外觀和整體主題。
選項 1 似乎是定義我的 CSS 並將 !important 放在每個規則之后，這不是很好。
選項 2 是主題支持，這聽起來像我想要的，但我無法確定如何開始。 我的應用程序正在使用 CRA，在更改我的 webpack 配置文件（我沒有）之間的文檔中我有點迷失，2017 年的過時博客文章建議我安裝一堆目的不明的模塊，以及建議我定義靈活變量文件的主題站點本身（我喜歡的一種方法）。
我無法確定為什么我的主題文件沒有被選中，並且似乎需要某種主題指南未涵蓋的構建修復。
在使用 CRA 構建過程時使主題工作的最佳方法是什么？ （ ./node_modules/.bin/react-scripts build ）
3 個解決方案
解決方案1
18 已采納 2019-03-05 15:40:14
專一才是王道。 只有當存在內聯樣式並且庫沒有公開以某種方式關閉屬性的方法時才需要使用!important （糟糕的架構選擇）。
以下選擇器類型列表按特異性增加：
類型選擇器（例如，h1）和偽元素（例如，::before）。
類選擇器（例如.example）、屬性選擇器（例如[type="radio"]）和偽類（例如:hover）。
ID 選擇器（例如，#example）。
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
在這里查看第一個語義 UI 的 UI 按鈕，由以下 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;
}
要覆蓋字體顏色，我們所要做的就是編寫一個比這個選擇器更具體的選擇器。 我們可以通過將它們的兩個類選擇器（同樣特定）與一個類型選擇器（額外的特定性）組合來實現這一點。
這看起來像：
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>
解決方案2
10 2020-02-23 02:02:11
實際上你永遠不應該使用!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 的選擇器。
解決方案3
1 2019-07-19 05:38:17
當您擁有來自語義 ui、引導程序、角度材料 ui 等的 CSS 文件時，僅舉幾例。 當您想覆蓋任何元素的 css 時，您在 html 中呈現或放置 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>
在 React 中覆蓋 Material UI 中的樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.