如何为同一个 React 组件设置不同的“特定”样式？答案

【问题标题】：How To Set Different 'Specific' Styles to The Same React Component?如何为同一个 React 组件设置不同的“特定”样式？
【发布时间】：2022-01-22 12:54:52
【问题描述】：

例如，我有一个按钮组件，我制作了 3 个实例。我希望它们都具有相同的底层结构，但颜色不同。在我的样式表中，我不想复制和粘贴已经在一个属性中指定的许多 CSS 属性，而只是更改“颜色”。我怎样才能让它接受 defaultStyle 并覆盖 color 属性？内部父级：

<Button color="green">
<Button color="red">
<Button color="blue">

内部子按钮：

return <button className={classes.btn}, {classes.props.color}>A Button</button>

【问题讨论】：

return <button className={classes.btn} style{{color:props.color}}>A Button</button> 怎么样？

标签： javascript html css reactjs

【解决方案1】：

这应该可以解决问题，给它们所有相同的类名，然后只用一个唯一的 id 来改变它们的颜色。

.app-button{
  width: 50px;
  height: 25px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #000000;
  color: #FFFFFF;
  margin-left: 5px;
}

#green-btn{
  background-color: green;
}

#red-btn{
  background-color: red;
}

#blue-btn{
  background-color: blue;
}

<button class="app-button" id="green-btn">green</button>
<button class="app-button" id="red-btn">red</button>
<button class="app-button" id="blue-btn">blue</button>

【讨论】：