1

难看的 Material UI 复选框和单选按钮

你好！我在React （基于类的组件）中使用Formik制作了一个表单，我得到了非常难看的复选框和单选按钮。我曾尝试使用 Chrome 中的检查元素深入研究代码，但仍然无法解决。我也在这里上传了图片。我在Angular中使用了相同来源的相同复选框，但在那里工作正常。我不知道为什么它在React中不起作用。

package.jsonMaterial-UI作为依赖 项安装在文件中："@material-ui/core": "^4.11.0"

这是我编写代码的方式：

import React, { Component } from 'react';
import { Formik } from 'formik';
import { FormControlLabel, FormControl, FormLabel, Checkbox, Select, MenuItem, Radio, RadioGroup } from '@material-ui/core';

export default class FormikForm extends Component {
  componentDidMount() {}
  
  render() {
    return (
      <div className="formik-container">
        <Formik>
          <form>
            <FormControlLabel
              className="paper-checkbox col-md-12"
              control={
                <Checkbox
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value="markAllDay"
                  color="secondary"
                  name="markAllDay"
                />
              }
               label="Book for the whole day"
            />
            
            <FormControlLabel
              className="paper-checkbox col-md-12"
              control={
                <Checkbox
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value="markRecurring"
                  color="secondary"
                  name="markRecurring"
                />
              }
               label="Recurring event"
            />
            
            <FormControl component="fieldset">
              <RadioGroup
                row aria-label="eventType"
                name="recurEventType"
                onChange={handleChange}
              >
                <FormControlLabel
                  value="recur"
                  control={<Radio />}
                  label="Whole recur event"
                />
                <FormControlLabel
                  value="event"
                  control={<Radio />}
                  label="Only this event"
                />
              </RadioGroup>
            </FormControl>

          </form>
        </Formik>
      </div>
    );
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

4

0 回答 0