web-dev-qa-db-fra.com

Définition de styles complexes de réaction tels que le survol, actifs sur les composants de réaction tels que le bouton

J'ai les styles suivants en CSS pour mes boutons. J'utilise aussi bootstrap.

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: #1f90bb;
    background-position: 0 -15px;
}

J'ai défini un bouton en tant que composant dans react.

const MyButton = ({children, onClick, classNames, ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {`${classNames}`}
        {...rest}
    >
        {children}
    </button>
);

Basé sur une valeur extraite du serveur, je souhaite modifier la couleur complète du bouton.

Question 1:

Comment définir le style complet du bouton en tant que style intégré?

Question 2:

De plus, puis-je utiliser certaines fonctionnalités de scss telles que mixins dans react pour générer des styles de bouton en passant dynamiquement couleur en tant que variable?

Question 3:

Devrais-je utiliser des styles en ligne ou des noms de classe en utilisant CSS en js?

Pour un composant générique tel qu'un bouton, devrions-nous utiliser une classe globale pouvant être réutilisée à tous les emplacements où le bouton est défini ou utiliser un style en ligne local et créer des styles en ligne à tous les endroits?

javascriptcssreactjssass
32
WitVault

CSS dans JS (avec pseudo-classes et support de MQ)

Il y a beaucoup de librairies pour écrire CSS avec React qui supporte les pseudo-classes mais toutes, sinon toutes, vous obligent à utiliser inline ou à écrire votre CSS en JS recommande vivement

Modules CSS (écrivez votre CSS comme d'habitude, mais d'une meilleure façon)

Il existe également modules CSS qui, si vous utilisez déjà Webpack doit être simple à configurer , qui vous permet de import/require Votre CSS en tant qu'objet l'utilise votre composant comme suit:

import styles from './Button.css'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {styles.primary}
        {...rest}
    >
        {children}
    </button>
);

Découpler vos composants

J'ajouterais aussi que vous ne devriez pas passer de cours à la <Button /> et traiter les conditions à l'intérieur du composant lui-même. Par exemple en utilisant noms de classe lib , vous pouvez faire quelque chose comme ce qui suit.

import classnames from 'classnames'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        {/* 
          depends on the type prop, you will get the relevent button 
          so no need for consumers to care about the internals of the component
        */}
        className = {classnames('.btn', { [`btn-${type}`]: true })}
        {...rest}
    >
        {children}
    </button>
);

Vous pouvez même combiner les modules CSS & classnames lib pour créer des combinaisons puissantes.

17
ahmedelgabri

Personnellement, j'utiliserais les CSS globaux et le connecte avec Webpack . Il gardera votre React beaucoup plus propre et bien sûr plus modulaire et facile à modifier.

À ma connaissance, les fonctionnalités SCSS ne peuvent pas être utilisées en ligne avec votre React.

Si vous avez besoin de définir des styles inline dans React c'est fait comme ça;

var buttonStyle = {
    backgroundColor: "#229ac8",
    backgroundImage: "linear-gradient(to bottom, #23a1d1, #1f90bb)",
    backgroundRepeat: "repeat-x",
    borderColor: "#1f90bb #1f90bb #145e7a",
    color: "#ffffff",
    textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
}

<button style={buttonStyle}>Button</button>
11
David Meents

hover: avec utilisation des crochets:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

Vous pouvez utiliser la même technique pour des scénarios plus complexes.

2
Jaroslav

Question 1:

Comment définir le style complet du bouton en tant que style intégré?

De l’officiel docs :

Dans React, les styles en ligne ne sont pas spécifiés en tant que chaîne. Au lieu de cela, ils sont spécifiés avec un objet dont la clé est la version camelCased du nom du style et dont la valeur est la valeur du style, généralement une chaîne.

Étant donné le css suivant

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

Une représentation de style en ligne de ce serait

const MyButton = () =>
(
    <button
        className = { {
            backgroundColor: '#229ac8',
            backgroundImage: 'linear-gradient(to bottom, #23a1d1, #1f90bb)',
            backgroundRepeat: 'repeat-x',
            borderColor: '#1f90bb #1f90bb #145e7a',
            color: '#ffffff',
            textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)'
        } }
    </button>
);

Question 2

Aussi, puis-je utiliser certaines fonctionnalités de scss telles que mixins dans reag pour générer des styles de bouton en passant de manière dynamique la couleur comme variable?

Le style en ligne de React n'est qu'une abstraction de CSS. Il n'a pas d'autres fonctionnalités de fantaisie. Mais comme un style en ligne est juste un objet, il peut être généré dynamiquement de manière à simuler des mix mix et, bien sûr, à utiliser des variables.

Un mixage comme celui-ci

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

Peut être accompli avec quelque chose comme

const borderRadius = ($radius) => {
    return {
        WebkitBorderRadius: $radius;
        MozBorderRadius: $radius;
        MsBorderRadius: $radius;
        borderRadius: $radius;
    }
}

const MyComponent = () => {
    var inlineStyle = Object.assign({}, borderRadius(10), {
        backgroundColor: 'white'
    })

    return (
        <div style={ inlineStyle }>
            Hello, world!
        </div>
    )
}

Question 3

Devrais-je utiliser des styles en ligne ou des noms de classe en utilisant CSS en js?

A partir de celui-ci, vous ne pouvez pas obtenir de réponse définitive. Mais je recommanderais d'utiliser className pour les génériques et les styles intégrés pour des détails spécifiques. C'est à vous de voir comment gérer le code pour répondre à vos besoins.

1
manyrdz

Vous pouvez définir un objet javascript avec des styles en ligne dans le bouton pour modifier la couleur de manière dynamique. Par exemple:

const normalButtonStyle = {
  background:'gray',
  color:'black',
  borderColor:'white'
}
const buttonCompleteStyle = {
  background:'red',
  color:'white',
  borderColor:'black'
} // this can be included in from another file as a style object as well

const MyButton = ({children, status, onClick, classNames, ...rest }) =>
(
  <button
    onClick   = {onClick}
    className = {`${classNames}`}
    {...rest}
    style={status === 'complete' ? buttonCompleteStyle : normalButtonStyle}
  >
    {children}
  </button>
);

Pas testé, mais quelque chose comme ça. Jetez un coup d'oeil à comment Material UI le fait.

1
Mike S.