web-dev-qa-db-fra.com

Semantic-UI React: comment utiliser un thème utilisant moins de variables dans un projet create-react-app

J'utilise Semantic-UI dans mon projet create-react-app. J'utilise un thème personnalisé pour modifier des composants individuels à l'aide de ThemeProvider, qui fonctionne bien. Cependant, j'essaie de comprendre comment modifier les variables moins comme décrit dans la documentation de sémantique-ui

Le réagir sémantique-ui documentation n'offre pas grand chose à ce sujet . Un conseil?

Mon index.js ressemble à peu près à ceci:

import 'semantic-ui-css/semantic.min.css'
import { ThemeProvider } from 'styled-components'
import mainTheme from './themes/mainTheme'


ReactDOM.render(
  <ThemeProvider theme={mainTheme}>
    <App />
  </ThemeProvider>
  document.getElementById('root')
)

Edit: pour être précis sur ce que je cherche à atteindre, je veux changer la police principale utilisée.

reactjscreate-react-appsemantic-ui-react
8
Zumo

Je suis tombé sur ce tutoriel pour utiliser un thème personnalisé à l’aide de l’interface utilisateur sematnic et de CRA qui décrit parfaitement ce processus . Il s’agit d’un processus long et silencieux, je le laisse donc avec uniquement le lien.

Voici le lien vers le dépôt Github du tutoriel.

1
Zumo

EDIT: Vous pouvez utiliser le paquet semantic-ui pour cela . https://react.semantic-ui.com/usage#semantic-ui-package

Installez le package complet de l'interface utilisateur sémantique. L’interface utilisateur sémantique comprend Gulp build outils afin que votre projet puisse conserver ses propres modifications de thème, vous permettant ainsi personnaliser les variables de style.

Une documentation détaillée sur les thèmes dans l'interface utilisateur sémantique est fournie ici.

$ npm install semantic-ui --save-dev

Après avoir construit le projet avec Gulp, vous devez inclure le fichier Fichier CSS modifié dans votre fichier index.js:

import '../semantic/dist/semantic.min.css';

D'autres approches: Une solution consiste à avoir une configuration de thème dans le cadre de votre projet et à avoir sémantique-ui probablement dans un repo git forké et à utiliser cette configuration pour exécuter une commande de construction personnalisée similaire à https: // sémantique-ui .com/introduction/build-tools.html .

Le flux de travail serait comme ça. Exécutez gulp build-new (dans le référentiel forked-si-fork) qui prend l'argument-dire pour le chemin theme.config (pointant vers le chemin du thème de vos projets réagissent) et se place dans le référentiel forké puis exécute gulp build en générant le css thématique. vous pouvez même avoir la tâche de remplacer les fichiers CSS conformes dans votre projet de réaction.

1
Sudheer

La réponse courte ... Je ne pense pas que vous puissiez.

Puisque vous importez directement le fichier .css ici, vous utilisez la feuille de style compilée, donc moins de variables ne vous servirait à rien. Je vois une des deux façons de résoudre ce problème. 

1) Créez votre propre feuille de style less qui importe ensuite moins de fichiers de cette bibliothèque. Je ne recommande pas cette option car vous n'utilisez pas encore moins.

2) Remplacez la police vous-même dans votre propre feuille de style. Puisque vous utilisez des composants stylés, vous pouvez utiliser l'option injectGlobal pour cela.

1
jerelmiller

En parcourant les docs , vous pouvez généralement avoir un dossier globals dans votre dossier theme qui contient deux fichiers facultatifs: site.variables et site.overrides. Je suppose que vous pouvez remplacer la variable @font dans ledit site.overrides. 

Vous pouvez voir un exemple de site.variablesici .

1
Daniel Andrei

Consultez le message officiel , il contient l’environnement préconfiguré avec Webpack3 et des exemples de thèmes qui suivent le guide de thèmes .

0
Alexander Fedyashov