1. Use Inline Styles

将css style作为一个prop直接写在html component里

缺点：不易修改和重复使用组件

    <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
    
    <input
      type="text"
      style={{
        borderColor: !isValid ? "red" : "#ccc",
        background-color: !isValid ? "salmon" : "transparent",
      }}
    />

2. Use Styled components

style中包含div, p, span等常用html标签，此处使用模板字符串语法（``) 来输入组件样式

在输入css样式时使用 & 符号来代替自己，后接其他component / 状态

还可以根据html组件输入的props来动态化设置组件：

例如： color: ${(props) => (props.invalid ? "red" : "black")};

使用JSX语法，以组件的props为输入，将组件的css样式与组件输入的props相关

const Button = styled.button`
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  @media (min-width: 768px){
    width: auto;
  }

  &:focus {
    outline: none;
  }

  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

export default Button;

3. Use CSS modules

将JS和控制样式的CSS分离，写为JS和CSS两个文件，然后在JS文件中导入css文件，使得CSS的作用域仅限于本组件

如果按传统方式导入CSS样式的话，CSS样式会作用于全局范围内, 如果有命名重复的问题的话会有bug出现。如果使用css modules会使得css文件的作用域仅限于本组件，可以更方便地独立管理组件样式 - scoped styles。

如果要使用css modules，需要更改css文件名为 [name].modules.css

import classes from './xxx.modules.css'


import classes from './Button.module.css';

const Button = props => {
  return (
    <button type={props.type} className={classes.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

可以看到使用css module为我们的button添加了一个特殊的，单一的class, 确保这个风格只作用在这个组件之上。

基于风格化组件的基础上，为了实现更多功能，完善用户体验，我们还可以结合动态类（dynamic class） 来进一步探索。

React风格化组件方法 ｜ 青训营笔记

1. Use Inline Styles

2. Use Styled components

3. Use CSS modules

React风格化组件方法｜青训营笔记