在React Bootstrap中为Form.Check（复选框）控件设置样式

Question

我是一个React和Bootstrap的初学者。我想知道，如何样式化Form.Check（复选框），以便可以用更好的样式覆盖默认外观和感觉（比如开关或其他外观和感觉）。

这是我尝试过的（我使用了CSS样式，但效果不如预期）：

MyForm.js

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
  constructor(props) {
    super(props);

    render()
    {
      return (
        <div>
          <br />
          <h3>Page Title</h3>
          <Form>
            <Form.Group >
              <Form.Check
                type="Checkbox"
                label="Click me"              
              />
            </Form.Group>
          </Form>
        </div>
      )
    }
  }
}

MyForm.css

.form-inline {
    width: 100%;
  }

  .form-group {
    width: 90%;
  }

  .input-group {
    width: 90% !important;
  }

  .form-control {
    width: 67% !important;
  }

  //This makes no difference
  .form-control [type=checkbox] {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;

    border-radius: 50px;
    position: relative;
  }

- DotNetSpartan

Answer 1

尝试更改CSS样式，将.form-control [type=checkbox]替换为.form-check。当使用<Form.Check/>时，这对我有效。

- Ziwei Lin

Answer 2

这是我的PHP代码中的一个转储，这可能值得一看。

/**
 * Checkbox Two
 */
.checkboxOne {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;

    border-radius: 50px;
    position: relative;
}
}

/**
 * Create the line for the circle to move across
 */
.checkboxOne:before {
    content: '';
    position: absolute;
    top: 19px;
    left: 14px;
    height: 2px;
    width: 90px;
    background: #111;
}

/**
 * Create the circle to click
 */
.checkboxOne label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;

    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}

/**
 * Create the click event for the checkbox
 */
.checkboxOne input[type=checkbox]:checked + label {
    left: 84px;
    background: #26ca28;
}

<section>
  <h3>Switch</h3>
    <div class='checkboxOne'>
        <input type='checkbox' value='1' id='checkboxOneInput' name='' />
        <label for='checkboxOneInput'></label>
    </div>
</section>

- user11412912