web-dev-qa-db-fra.com

façon idiomatique de partager des styles dans des composants de style?

essayant de porter du code de jss vers des composants de style, le code jss ressemble à ceci:

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

ma question est quelle serait la manière idiomatique d'accomplir ce partage des mêmes styles sur plusieurs composants?

javascriptstyled-componentsjss
21
tony_k

Vous pouvez partager des chaînes CSS réelles ou partager styled-components Composants:

  • Partager des chaînes CSS:
import {css} from 'styled-components'
const sharedStyle = css`
  color: green
`

// then later

const ComponentOne = styled.div`
  ${sharedStyle}
  /* some non-shared styles */
`
const ComponentTwo = styled.div`
  ${sharedStyle}
  /* some non-shared styles */
`
  • Partager le réel styled-components:
const Shared = styled.div`
  color: green;
`

// ... then later

const ComponentOne = styled(Shared)`
  /* some non-shared styles */
`
const ComponentTwo = styled(Shared)`
  /* some non-shared styles */
`

Mise à jour: Sur la base des questions dans les commentaires, j'ai créé un exemple pour montrer que le passage d'accessoires à la fonction css des composants de style fonctionne de la même manière que le passage d'accessoires aux composants eux-mêmes: https: // codesandbox .io/s/2488xq91qj? fontsize = 14 . La recommandation officielle de styled-components est de toujours envelopper les chaînes que vous passerez à styled-components dans la fonction de balise css. Dans cet exemple, le composant Test reçoit ses couleurs d'arrière-plan et de premier plan via des accessoires passés intégrés dans la variable cssString créée en appelant la fonction css.

45
Huy Nguyen

En plus de la réponse publiée, vous pouvez également créer une fonction qui accepte props/theme et renvoie le css``.

styled-components vérifiera le type de la valeur fournie, par exemple: ${shared} et si c'est un function il l'invoquera avec le props/theme correspondant.

import styled, {css} from 'styled-components';

const shared = ({theme, myProp}) => css`
  color: theme.color
`

/* ------------   */

const Component1 = styled.div`
  ${shared};
  /* more styles ... */
`
const Component2 = styled.div`
  ${shared};
  /* more styles ... */
`
6
Sagiv b.g