1
votes

Meilleure méthode d'importation de variables SCSS avec React Styled-Components?

Dans les composants React normaux si vous avez scss, vous pouvez y importer d'autres fichiers scss et accéder aux variables scss comme $ color-primary: blue ...

Quelle est la meilleure méthode pour y parvenir avec des composants stylisés?

Disons que j'ai quelques variables principales pour l'application que je souhaite utiliser: taille de police, famille de polices, couleurs, etc. Et je veux pouvoir les importer dans un composant React et les utiliser dans les composants stylisés de ce fichier?

Je sais que vous pouvez définir des variables dans chaque fichier individuel et les utiliser, mais cela va à l'encontre de l'objectif d'avoir des "variables globales" et de les utiliser.

Techniquement, je sais que les composants stylisés ne sont pas scss, donc vous ne pouvez probablement même pas importer un fichier scss et utiliser les variables à partir de celui-ci - alors comment avez-vous des variables globales que tous les fichiers de composants stylisés peuvent importer et utiliser?

reactjs sass styled-components

0 commentaires

3 Réponses :

2
votes

Je pense que vous voulez avoir un fichier de jetons, les jetons sont utilisés pour organiser les "variables" qui décrivent une propriété dans votre système de conception, https://www.lightningdesignsystem.com/design-tokens/#site-main-content .

Heureusement pour vous, cela peut être accompli assez simple dans le monde javascript. à peu près il suffit de créer un fichier où vous déclarez toutes ces constantes, puis de l'exporter et de le consommer là où vous voulez le faire:

Je peux vous proposer une solution simple:

// tokens.js

const tokens = {
  colorGray1: "#FF1100",
  colorGray2: "#CCC",
  colorGray3: "#DDD",
  colorGray4: "#EEE",
  colorBackgroundBlack: "#000",
}

export default tokens;

// app.js
import React from "react"
import styled from "styled-component";
import tokens from "./tokens.js" // this is somewhere in your app

const StyledComponent = styled.div`
  color: ${tokens.colorGray1},
  background: ${tokens.colorBackgroundBlack}
`

export default function MyComponent() {
  return <StyledComponent>This has grey color and black background</StyledComponent>
}

aussi, styled-component a une très bonne bibliothèque nommée polish qui émule le mixage et la fonction que sass fournit normalement https://polished.js.org/

Bonne chance!

0 commentaires

1
votes

Pour répondre: "Comment avez-vous des variables globales que tous les fichiers de composants de style peuvent importer et utiliser?"

Vous devez configurer un Thème qui peut être partagé dans toute votre application via un ThemeProvider .

Après cela, il y a peut-être de la magie où vous pouvez importer vos variables scss existantes dans le fichier où votre thème est lancé et attribuer ces variables existantes au besoin ... mais TBH, je voudrais juste tenez-vous-en à utiliser un thème et tuez scss (composant de style FTW)

1 commentaires

Ne méritait pas le vote défavorable, l'OMI, le PO, a présenté un problème X-Y et c'est une bonne réponse au problème sous-jacent réel. En fait, la question comprend: "Comment avez-vous des variables globales que tous les fichiers de composants de style peuvent importer et utiliser".

0
votes

Il existe quelques chargeurs Webpack qui chargeront un fichier scss et convertiront les variables scss en un objet js. J'ai utilisé sass-values-loader

import styles from './style.scss';
import vars from '!!sass-vars-to-js-loader!./style.scss';

console.log(vars.colorPrimary);

0 commentaires