如何更改material-ui中复选框的边框半径？

Question

我在我的React应用程序中导入了material-ui，我可以更改复选框的颜色和大小，如您所见，但我无法更改图标borderRadius，我应该怎么做？

import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

const CheckBox = () => {
    return <div>
        <FormGroup>
            <StyledFormControlLabel
                control={
                    <Checkbox
                        sx={{
                          '& .MuiSvgIcon-root': {
                                fontSize: 70,
                                borderRadius: 20
                            }
                        }}
                    />
                }
                label="Villa"
            />
        </FormGroup>
    </div>
    ```

Answer 1

您将无法更改它的半径，因为继承时它是渲染时的 SVG。

因此不可能通过边界半径来做到这一点。

如果您想更改它，您必须像这样插入图标：

<Checkbox icon={<CustomCheckbox/>} .../>

这里是文档的链接带有自定义图标的复选框

Answer 2

MUI 具有相应的组件，您可以根据您的用例使用。
请参阅下面的链接和代码。

import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import CircleChecked from "@material-ui/icons/CheckCircleOutline";
import CircleUnchecked from "@material-ui/icons/RadioButtonUnchecked";
const App = () => {
  return (
    <div>
      <FormGroup>
        <FormControlLabel
          control={
            <Checkbox
              icon={<CircleUnchecked />}
              checkedIcon={<CircleChecked />}
              sx={{
                "& .MuiSvgIcon-root": {
                  fontSize: 70,
                  borderRadius: 20
                }
              }}
            />
          }
          label="Villa"
        />
      </FormGroup>
    </div>
  );
};

export default App;