Semantic React UI：有没有办法改变复选框切换的背景颜色？答案

【问题标题】：Semantic React UI : is there a way to change the background color of a checkbox toggle?Semantic React UI：有没有办法改变复选框切换的背景颜色？
【发布时间】：2020-10-16 11:49:11
【问题描述】：

我正在通过 Semantic React UI 使用toggle checkboxes。复选框的背景颜色在其样式中定义：

  .ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
      background-color: #2185d0!important;
  }

...但我希望能够设置一个可以改变颜色的道具，比如

<Checkbox toggle toggleColor="red"/>

我可以扩展该组件来实现这一点，还是有其他方法可以实现这一点？

谢谢！

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

是的，你可以，但它不漂亮！

我有一个适用于语义 UI 并且经过大量测试的解决方案。我认为它也适用于语义 UI 反应，但没有进行广泛的测试。

首先，语义用户界面中缺少复选框的颜色功能（据我所知，至少没有关于它的文档）。所以你需要使用 CSS 来定义你的颜色。你所有的颜色！因此，如果您有很多东西，您可能会想要 SASS 或其他东西。此外，您可能希望使用语义 ui 提出功能请求。

其次，我的解决方案使用复选框的标签为复选框着色。我完全意识到这并不漂亮，但这显然是在没有太多额外代码甚至更丑陋的方法的情况下做到这一点的唯一方法。

将此添加到您的代码中（请注意，stackoverflow 无法正确呈现此示例，因为 <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css"> 显然丢失了。如果有办法在此添加此内容，请告诉我。）

.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
    background: #000000 !important;
}

.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
    background: #FFFFFF !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<div class="ui segment">
  <div class="ui attached icon form" id="info_input_form">
    <div class="ui toggle checkbox">
      <input type="checkbox" tabindex="0">
      <label class="coloring black">Toggle</label>
    </div>
  </div>
</div>

【讨论】：