web-dev-qa-db-fra.com

Utilisation de variables Javascript avec des composants de style

J'utilise styled-components pour construire mes composants. Toutes les propriétés de style qui acceptent des valeurs personnalisées sont réutilisées dans tous mes composants (comme il se doit). Dans cet esprit, j'aimerais utiliser une sorte de variables globales afin que les mises à jour se propagent à tous les composants sans avoir besoin de mettre à jour chaque style individuellement.

Quelque chose comme ça:

// Variables.js

var fontSizeMedium = 16px;

// Section.js

const Section = styled.section`
  font-size: ${fontSizeMedium};
`;

// Button.js

const Button = styled.button`
  font-size: ${fontSizeMedium};
`;

// Label.js

const Label = styled.span`
  font-size: ${fontSizeMedium};
`;

Je suppose que je me trompe cependant dans la syntaxe? De plus, je sais que les variables globales ne sont pas recommandées dans Javascript Land, mais dans la conception Land, la réutilisation des styles à travers les composants est un must absolu. Quels sont les compromis ici?

javascriptstyled-components
18
colmtuite

J'ai finalement compris cela, alors voici comment vous pouvez le faire, au moins si vous utilisez React.

Vous devez définir les variables dans un fichier et les exporter.

// Variables.js

export const FONTSIZE_5 = '20px';

Vous devez ensuite importer ces variables dans chaque fichier de composant.

// Button.js

import * as palette from './Variables.js';

Ensuite, vous pouvez utiliser les variables dans vos composants de style comme ceci:

const Button = styled.button`
  font-size: ${palette.FONTSIZE_5};
`;
23
colmtuite

Emballage d'un <ThemeProvider> autour de votre application peut aider:

https://www.styled-components.com/docs/advanced#theming

const theme = {
  fontColour: 'purple'
}

render() {
  return (
    <ThemeProvider theme={theme}>
      <MyApplication />
    </ThemeProvider>
  )
}

Cela donnera à tous les composants de style enfant un accès au thème comme ceci:

const MyApplication = styled.section`
  color: ${props => props.theme.fontColour}
`

Ou

const MyFancyButton = styled.button`
  background: ${props => props.theme.fontColour}
`

Ou accédez au thème via https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components

22
Ricardinho