web-dev-qa-db-fra.com

Styles primordiaux dans une interface utilisateur sémantique réagir

J'utilise Sémantican UI React et j'essaie de comprendre le meilleur moyen de remplacer les styles par défaut, de sorte que je puisse changer l'apparence des cartes et le thème général.

L'option 1 semble être de définir mon CSS et de mettre! Important après chaque règle, ce qui n'est pas génial.

L'option 2 est le support de thème, ce qui ressemble à ce que je veux, sauf que je ne peux pas déterminer comment commencer avec cela. Mon application utilise l'ARC, et je suis un peu perdu dans la documentation entre le changement de fichier de configuration de WebPack (je n'en ai pas), des publications de blog sur la date à partir de 2017 me conseillent d'installer un tas de modules dont le but n'est pas clair, et le site de thème lui-même qui me conseille de définir des fichiers variables flexibles (une approche que j'aime).

Je ne peux pas déterminer pourquoi mes fichiers thématiques ne sont pas choisis cependant, et il semble qu'une sorte de solution de construction est nécessaire qui ne soit pas couvert par le guide de thème.

Quelle est la meilleure façon de faire du point de travailler lors de l'utilisation d'un processus de construction de l'ARC? (./node_modules/.bin/react-scripts build)

csssemantic-ui-react
8
FrobberOfBits

La spécificité est roi. Seul temps devrait utiliser !important serait lorsque le style en ligne est présent et que la bibliothèque n'expose pas un moyen de basculer la propriété d'une manière ou d'une autre (choix d'architecture médiocre).

La liste suivante des types de sélecteur augmente par la spécificité:

Type Selectors (par exemple, pseudo-éléments (par exemple, :: avant).

Sélecteurs de classe (par exemple, .Example), Sélecteurs d'attributs (par exemple, [Type = "radio"]) et pseudo-classes (par exemple,: VOIR) .

ID SELECTEURS (par exemple, #Example).

https://developer.mozilla.org/en-us/docs/web/css/specificity

Jetez un coup d'œil au premier bouton UI pour une interface utilisateur sémantique ici , est composé du HTML suivant:

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

CSS est attaché via 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;
}

Pour remplacer, la couleur de la police, tout ce que nous avons à faire est d'écrire un sélecteur plus spécifique que ce sélecteur. Nous pouvons y parvenir en combinant leurs deux sélecteurs de classe (également spécifiques) avec un sélecteur de type (spécificité supplémentaire).

Cela ressemblerait à:

button.ui.button {
  color: red;
}

Maintenant depuis button.ui.button est plus spécifique à la description de l'emplacement de l'élément dans la page (DOM) que de dire juste .ui.button, ces signaux au navigateur que ce style devrait remplacer la déclaration précédente. C'est un moyen courant de personnaliser un thème.

Super documents ici: 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

En fait, vous ne devriez jamais utiliser !important sauf si vous avez vraiment vraiment vraiment. En plus de vous faire des styles très laids, c'est une très mauvaise pratique pour faire tous vos styles !important

Puisque vous avez mentionné l'ARC, qui prend en charge les modules SCSS, je peux vous dire qu'il existe une troisième option qui à mon avis est un peu plus agréable.

Ici, il va en 3 étapes faciles:

1. Définissez une pièce d'identité quelque part haut dans la hiérarchie. Je le fais dans le public/index.html sur la balise du corps :

// public/index.html

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

2. Créez un fichier de module SCSS et enveloppez toutes vos classes dans un :global(#app)

// src/page.module.scss

:global(#app) {
  .container {
    padding: 2rem;
  }
  .button {
    font-size: 3em;
  }

}

. Importer les styles et les transmettre aux composants sémantiques

// 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>
)

La raison pour laquelle cela fonctionne est que la sortie du module page.module.scss SCSS sera compilée à ceci:

#app .page_container_2oYQ {
  padding: 2rem;
}

#app .page_button_2oYQ {
  font-size: 3em;
}

Comme vous pouvez le constater, il ajoutera le sélecteur I #app avant le nom de la classe modularisé, qui augmentera la spécificité de vos sélecteurs, ce qui remplacera à son tour les UI sémantique.

0
ovidb

Lorsque vous avez un fichier CSS de Sémantican UI, Bootstrap, angular UI, etc., pour n'en nommer que quelques-uns. Lorsque vous souhaitez remplacer le CSS pour n'importe quel élément, l'ordre dans lequel vous rendez ou Placez votre fichier CSS dans votre HTML détermine la préséance.

Pour que votre fichier CSS remplace une autre liste de fichiers CSS en bas. Bien sûr, assurez-vous que votre sélecteur CSS cible l'élément que vous souhaitez remplacer.

Une image vaut 1000 mots

En supposant que vous voulez remplacer cela ci-dessous de Sémantican 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