javascript - 在 React Bootstrap 中设置 Form.Check(复选框)控件的样式

Question

我是 react 和引导的初学者。我想知道 - 如何设计 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;
  }

Answer 1

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