Question

我正在使用react-bootstrap。我正在尝试设置自定义复选框的样式，因为它似乎可以实现。 ho，它不起作用。我正在documentation告诉我的事情中。

这是我的代码。

import * as React from "react";
import { t as typy } from 'typy';
import _ from 'lodash';
import { Form, FormCheck } from "react-bootstrap";
import { ErrorMessage } from "formik";

export type Props = {
  isChecked: Boolean,
  changeHandler: Function
}

export const Checkbox = ({
  isChecked,
  changeHandler
}: Props) => {


  return (
    <Form>
  {['checkbox', 'radio'].map((type) => (
    <div key={`custom-${type}`} className="mb-3">
      <Form.Check
        custom
        type={type}
        id={`custom-${type}`}
        label={`Check this custom ${type}`}
      />

      <Form.Check
        custom
        disabled
        type={type}
        label={`disabled ${type}`}
        id={`disabled-custom-${type}`}
      />
    </div>
  ))}
</Form>
  );
};

export default Checkbox;

这是我的CSS。我只想看看它是否适用于样式：

#custom-checkbox {
   background-color: red;
   width: 10rem;
 }

Answer 1

您可以使用 .custom-control-input 和 .custom-control-label 类将自定义样式应用于 react-bootstrap 中的自定义复选框。

如何使用react-bootstrap自定义复选框样式？

1 个答案: