设置复杂反应内联样式，例如悬停，在按钮等反应组件上激活

Question

I have the following styles in css for my buttons. I am also using 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;
}

I have defined a button as a component in react.

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

Based on some value fetched from the server I want to change the complete color of the button.

Question 1:

How can I set the button's complete style as inline style?

Question 2:

Also, can I use some scss features like mixins in react to generate button styles dynamically passing color as variable ?

Question 3:

Should I use inline styles or classnames using css in js?

For a generic component such as a button should we use a global class which can be reused in all places where button is defined or use a local inline style and create inline styles in all places?

Answer 1

CSS in JS (with pseudo classes & MQ support)

There are lots of libs to write CSS with React that supports pseudo classes but all, if not all of them requires you to inline or write your CSS in JS Which I highly recommend

CSS Modules (Write your CSS as normal, but in a better way)

There is also CSS modules which if you are already using Webpack should be simple to set it up , which let you import / require your CSS as an object use it your component like so:

import styles from './Button.css'

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

Decoupling your components

I'd also add that you shouldn't pass classes to the <Button /> and deal with the conditions inside the component itself. For example using classnames lib you can do something like the following.

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>
);

You can even combine CSS Modules & classnames lib to create some powerful combinations.

Answer 2

Personally, I would use global CSS and wire it up with Webpack . It will keep your React much cleaner and of course more modular and easily edited.

To the best of my knowledge, SCSS features cannot be used inline with your React.

If you need to set inline styles in React it's done like this;

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>

Answer 3

hover: with using of the hooks:

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>
  );
};

You can use the same technique for more complex scenarios.

Answer 4

You could set a javascript object with inline styles in the button to change the color dynamically. For example:

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>
);

Not tested, but something like that. Take a look at how Material UI does it.

Answer 5

Question 1:

How can I set the button's complete style as inline style?

From the official docs :

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string

Given the following css

.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);
}

An inline style representation of it would be

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

Also, can I use some scss features like mixins in react to generate button styles dynamically passing color as variable ?

React's inline style is just an abstraction of css. It has no other fancy features. But since an inline style is just an object, it can be dynamically generated in a way that you can simulate scss mixins and, of course, you can use variables.

A scss mixin like this one

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

Can be accomplished with something like

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

Should I use inline styles or classnames using css in js?

From this one you can't get a definitive answer. But I would recommend use className for generics and inline styles for specifics. Is up to you how to manage the code to meet your needs.