如何基于 React Component Prop 附加 CSS 样式？答案

【问题标题】：How do I attach CSS styles based on React Component Prop?如何基于 React Component Prop 附加 CSS 样式？
【发布时间】：2021-09-05 02:23:06
【问题描述】：

我正在尝试构建一个 React 组件库，Button 组件采用以下道具：

<Button
  kind='primary' //secondary, ghost
  size='large' //small, large
  success
  shape='' //pill
  onClick={() => console.log("**clicked**")}
  >
  Button Click
</Button>

根据传递给道具的内容，我想渲染某种样式，例如：

import { Colors } from "../Utils/Colors";
export default function Button({
  children,
  className,
  kind,
  size,
  shape,
  success,
  warning,
  error,
  ...props
}) {
  const btnStyle = {
    boxSizing: "border-box",
    display: "inline-block",
    border: "1px solid black",
    cursor: "pointer",
    borderRadius: shape == "pill" ? "100px" : "0px",
  };

  if (success || "") {
    Object.assign(btnStyle, {
      backgroundColor: Colors.success,
      color: "white",
      border: "1px solid" + Colors.sucess,
    });
  }

  if (warning) {
    Object.assign(btnStyle, {
      backgroundColor: Colors.warning,
      color: "white",
    });
  }
  if (error) {
    Object.assign(btnStyle, { backgroundColor: Colors.error, color: "white" });
  }

  if (kind == "primary") {
    Object.assign(btnStyle, {});
  }
  if (kind == "secondary") {
    Object.assign(btnStyle, {
      backgroundColor: "white",
    });
  }
  if (kind == "ghost") {
    Object.assign(btnStyle, { background: "none", border: "none" });
  }
 
  if (size == "mini") {
    Object.assign(btnStyle, { fontSize: "10px", padding: "4px 10px" });
  }

  if (size == "small") {
    Object.assign(btnStyle, { fontSize: "12px", padding: "6px 20px" });
  }

  if (size == "" || size == "medium") {
    Object.assign(btnStyle, { fontSize: "14px", padding: "8px 24px" });
  }

  if (size == "large") {
    Object.assign(btnStyle, { fontSize: "18px", padding: "10px 34px" });
  }

  if (kind === "default") {
    Object.assign(btnStyle, { color: "pink" });
  }

  return (
    <div>
      <button style={btnStyle} className={`btn ${className}`} {...props}>
        {children}
      </button>
    </div>
  );
}

正如我们所看到的，我正在基于道具向btnStyle 推送一个新的对象样式，这当然不是一个好方法。我该如何优化它？

我尝试过的：

1 ) 我曾尝试查看流行的开源设计系统，如 Base Web、Adobe Spectrum，但由于代码库非常结构化，因此无法走得更远。

2 ) 我尝试将样式存储在一个数组中并推动 if-else 条件，这又是一回事。

3 ) 在 SO 上查看了其他答案，发现一些仅处理附加 CSS 样式和变量的答案，而不是真正的组件库类型的模式。

3 ) 我尝试在 btnStyle 本身中进行条件样式设置，例如：

borderRadius : ${ type == "pill" ? "10px" : "0px" }

但上述方法的工作方式非常有限，仅适用于 kind 属性中存在问题的两种情况。

任何对正确方向有帮助的建议都会创造奇迹。

感谢您阅读本文。

【问题讨论】：

标签： javascript css reactjs design-patterns react-component

【解决方案1】：

例子：

创建button.module.css 文件
import style from './button.module.css' 在 Button 组件中

在button.module.css 文件中，您有以下类，

.primary,
.success,
.danger,
.warning {
  color: #fff;
}
.primary {
  background-color: blue;
  border-color: darkblue;
}
.primary:hover {
  background-color: darkblue;
}
.success {
  background-color: green;
  border-color: darkgreen;
}
.success:hover {
  background-color: darkgreen;
}
.danger {
  background-color: red;
  border-color: darkred;
}
.danger:hover {
  background-color: darkred;
}
.warning {
  background-color: orange;
  border-color: darkorange;
}
.warning:hover {
  background-color: darkorange;
}

我有四种 CSS 按钮。主要、成功、危险和警告。现在，您可以像 ${style[kind]} 这样添加您的课程，

  return (
    <div>
      <button style={btnStyle} className={`${style[kind]}`} {...props}>
        {children}
      </button>
    </div>
  );

然后添加Button.propTypes

Button.propTypes = {
    kind: PropTypes.oneOf([
        'primary',
        'success',
        'danger',
        'warning'
    ])
}

【讨论】：