Extending Styles

Definition

Creer un nouveau styled component base sur un existant avec styled(BaseComponent). Le nouveau composant herite de tous les styles et peut en ajouter/overrider.

Analogie

Un enfant qui herite des traits de ses parents et ajoute ses propres caracteristiques.

Exemple de code

const Base = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
`
const Primary = styled(Base)`
  background: blue;
  color: white;
`
const Danger = styled(Base)`
  background: red;
  color: white;
`

Cas d'usage

Creer des variantes de composants qui partagent une base de styles commune.

Termes lies