Réglage Complexe réagir styles en ligne tels que hover, active sur react éléments tels que les boutons

CSS, JS (avec pseudo classes & MQ support)

Il y a beaucoup de libs pour écrire CSS à Réagir qui prend en charge la pseudo-classes, mais de tous, si tous ne vous oblige à en ligne ou écrire votre CSS, JS que je recommande fortement

Des Modules CSS (Écrire votre code CSS comme d'habitude, mais en mieux)

Il est également Des modules CSS qui, si vous êtes déjà à l'aide de Webpack devrait être simple à configurer, qui vous permettent de import/require votre CSS comme un objet utiliser 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écouplage des composants

Je voudrais aussi ajouter que vous ne devriez pas passer des classes de l' <Button /> et de traiter avec les conditions à l'intérieur du composant lui-même. Par exemple à l'aide de les 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 des Modules CSS & classnames lib pour créer de puissantes combinaisons.

hover: avec l'aide de 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.

Question 1:

Comment puis-je régler le bouton complet de style de style en ligne?

De l'officiel docs:

À Réagir, styles en ligne ne sont pas spécifié comme une chaîne. Au lieu de cela ils sont spécifiés avec un objet dont la clé est le camelcase version du nom du style, et dont la valeur est le style de la valeur, généralement une chaîne

Donné le code 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);
}

Style en ligne représentation de ce qu'il 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 des scss fonctionnalités comme le mixin à réagir pour générer des styles de bouton dynamiquement en passant de la couleur en tant que variable ?

Réagir de style en ligne est qu'une abstraction de la css. Il n'a pas d'autres caractéristiques de fantaisie. Mais depuis une ligne de style est simplement un objet, il peut être généré dynamiquement dans une manière que vous pouvez simuler scss mixin et, bien sûr, vous pouvez utiliser des variables.

Un scss mixin 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

Dois-je utiliser des styles en ligne ou les noms de classe à l'aide de css, js?

De celui-ci, vous ne pouvez pas obtenir une réponse définitive. Mais je recommande l'utilisation d'un nom de classe des médicaments génériques et des styles en ligne pour plus de détails. C'est à vous de la façon de gérer le code pour répondre à vos besoins.