Переопределение стилей в semantic ui react

ProgramBox

Переопределение стилей в semantic ui react

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#css #semantic-ui-react

Вопрос:

Я использую Semantic UI React и пытаюсь придумать наилучший способ переопределения стилей по умолчанию, чтобы я мог изменить внешний вид карточек и общую тему.

Вариант 1, похоже, заключается в том, чтобы определить мой CSS и поставить !important после каждого правила, что не очень хорошо.

Вариант 2 — это поддержка тематизации, которая звучит так, как я хочу, за исключением того, что я не могу определить, как с этим начать. Мое приложение использует CRA, и я немного запутался в документации между изменением моего файла конфигурации webpack (у меня его нет), устаревшими сообщениями в блоге от 2017 года, в которых мне советуют установить кучу модулей, назначение которых неясно, и самим сайтом тематизации, который советует мне определять файлы гибких переменных (подход, который мне нравится).

Я не могу определить, почему мои файлы тем не загружаются, и, похоже, необходимо какое-то исправление сборки, которое не описано в руководстве по тематизации.

Каков наилучший способ заставить тематизацию работать при использовании процесса сборки CRA? ( ./node_modules/.bin/react-scripts build )

Ответ №1:

Специфика имеет первостепенное значение. Единственное время, которое потребуется использовать !important , — это когда присутствует встроенный стиль и библиотека не предоставляет способа каким-либо образом отключить свойство (плохой выбор архитектуры).

Следующий список типов селекторов увеличивается за счет специфичности:

Селекторы типов (например, h1) и псевдоэлементы (например, ::before).

Селекторы классов (например, .example), селекторы атрибутов (например, [type=»radio»]) и псевдоклассы (например, :hover).

Селекторы идентификаторов (например, #example).

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

Взгляните на первую кнопку пользовательского интерфейса для Semantic 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>

1. За исключением того, что на самом деле это не работает, потому что Semantic использует !important везде.. github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions /…

2. @mmla Применяются те же правила, это работает так, как ожидалось. Пожалуйста, смотрите документы по CSS developer.mozilla.org/en-US/docs/Web/CSS/Specificity в частности, раздел о том, как переопределить ! Важно

3. @JoshuaRobinson значит, в этом случае нам нужно использовать !important в конце? или есть способ перезаписать !important без необходимости объявлять другое !important правило?

4. Это работает изящно. Просто выберите подходящие селекторы, которые применяют указанные изменения

Ответ №2:

На самом деле вам никогда не следует использовать !important , если у вас действительно тоже нет. Помимо того, что ваши стили выглядят очень уродливо, очень плохой практикой является создание всех ваших стилей !important

Поскольку вы упомянули CRA, который поддерживает модули SCSS, я могу сказать вам, что есть третий вариант, который, на мой взгляд, немного приятнее.

Вот это делается в 3 простых шага:

1. Установите идентификатор где-нибудь высоко в иерархии. Я делаю это в public/index.html теге body:

 // 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 селектор идентификатора перед именем модульного класса, что повысит специфичность ваших селекторов, которые, в свою очередь, переопределят селекторы semantic-ui.

Ответ №3:

Если у вас есть CSS-файл из semantic ui, bootstrap, angular material ui и т.д., это лишь некоторые из них. Когда вы хотите переопределить css для любого элемента, порядок, в котором вы визуализируете или размещаете свой css-файл в вашем html, определяет приоритет.

Чтобы ваш css-файл переопределял какой-либо другой css-файл, укажите свой внизу. Конечно, убедитесь, что ваш css-селектор нацелен на элемент, который вы хотите переопределить.

Картинка стоит 1000 слов

Предполагая, что вы хотите переопределить это ниже из semantic 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>