Переопределяющие стили в семантическом интерфейсе реагируют - PullRequest
Новая
       9

Переопределяющие стили в семантическом интерфейсе реагируют

0 голосов
/ 05 марта 2019

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

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 05 марта 2019

Специфика короля. Для использования !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>
0 голосов
/ 19 июля 2019

Если у вас есть CSS-файл из семантического пользовательского интерфейса, начальной загрузки, пользовательского интерфейса из материала и т. Д., Это только некоторые из них.Если вы хотите переопределить CSS для любого элемента, порядок, в котором вы отображаете или помещаете свой файл CSS в ваш HTML, определяет приоритет.

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

Изображение стоит 1000 слов

Если вы хотите переопределить это ниже из семантического интерфейса 

<!-- 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>
...