web-dev-qa-db-ja.com

セマンティックUIのスタイルのオーバーライド

私は Semantic UI React を使用しており、カードの外観と全体的なテーマを変更できるように、デフォルトのスタイルをオーバーライドするための最良の方法を見つけようとしています。

オプション1は、CSSを定義し、すべてのルールの後に！importantを配置することであるようですが、これは素晴らしいことではありません。

オプション2はテーマのサポートです。これは、どのように始めればよいかわからないことを除けば、私が望むもののように聞こえます。私のアプリはCRAを使用していますが、webpack構成ファイルを変更するまでの間にドキュメントが少し失われています（ファイルはありません）。2017年の古いブログ投稿で、目的が不明なモジュールを多数インストールするようにアドバイスされています。そして テーマサイト自体 これは柔軟な変数ファイルを定義するように私にアドバイスしています（私が好きなアプローチ）。

テーマファイルが取得されない理由を特定できません。また、テーマガイドで説明されていない何らかのビルド修正が必要なようです。

CRAビルドプロセスを使用しながらテーマを機能させるための最良の方法は何ですか？ （./node_modules/.bin/react-scripts build）

csssemantic-ui-react
3
FrobberOfBits

特異性が王様です。 !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;
}

たとえば、フォントの色を上書きするには、このセレクターよりも具体的なセレクターを作成するだけです。これは、2つのクラスセレクター（同等に固有）とタイプセレクター（追加の特異性）を組み合わせることで実現できます。

これは次のようになります。

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>
6
Joshua Robinson

実際には、本当に本当に持っているのでない限り、_!important_を使用しないでください。スタイルを非常に醜く見せることは別として、すべてのスタイルを_!important_にすることは非常に悪い習慣です。

SCSSモジュールをサポートするCRAについておっしゃっていたので、私の意見ではもう少し良い3番目のオプションがあると言えます。

ここでは、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;
  }

}
_

。スタイルをインポートし、セマンティックコンポーネントに渡します

_// 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セレクターが追加されます。これにより、セレクターの特異性が高まり、semantic-uiのものがオーバーライドされます。

0
ovidb

セマンティックUI、ブートストラップ、angularマテリアルUIなど）のCSSファイルがある場合、いくつか例を挙げます。任意の要素のcssをオーバーライドする場合は、レンダリングする順序またはcssファイルをhtmlに配置すると、優先順位が決まります。

あなたの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>
0
Julius Depulla