reactjs - 语义 react 用户界面 : is there a way to change the background color of a checkbox toggle?

Question

我正在使用 toggle checkboxes通过语义 react 用户界面。 复选框的背景颜色在此处的样式中定义:

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

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

<Checkbox toggle toggleColor="red"/>

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

谢谢!

Answer 1

是的，你可以，但它并不漂亮!

我有一个适用于 semantic-ui 并经过严格测试的解决方案。我假设它也适用于 semantic-ui-react 但没有广泛测试。

首先，semantic-ui 中缺少复选框的颜色功能(据我所知，至少没有相关文档)。所以你需要使用 CSS 来定义你的颜色。你所有的颜色!所以如果你有很多，你可能想要 SASS 或其他东西。此外，您可能希望使用语义 ui 提出功能请求。

其次，我的解决方案使用复选框的标签来为复选框着色。我完全知道这并不漂亮，但这显然是无需太多额外代码或更丑陋方法的唯一方法。

将此添加到您的代码中(请注意，由于 <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css"> 明显缺失，stackoverflow 无法正确呈现此示例。如果有办法在这边添加此内容，请告诉我。)

.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>