checkbox - Material-UI 复选框和单选按钮看起来很丑
问题描述
你好!我在React (基于类的组件)中使用Formik制作了一个表单,我得到了非常难看的复选框和单选按钮。我曾尝试使用 Chrome 中的检查元素深入研究代码,但仍然无法解决。我也在这里上传了图片。我在Angular中使用了相同来源的相同复选框,但在那里工作正常。我不知道为什么它在React中不起作用。
package.json
Material-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>
解决方案
推荐阅读
- python - 大量的python多处理导致内存错误
- java - 如果数据库查询在 Spring Boot webapp REST API 控制器中返回空对象,如何以未经授权的用户身份发送 401 和 404?
- javascript - 如何从 JSON 字符串化对象数组中读取数据并遍历它并使用相同的对象
- javascript - 解析对象数组以格式化数据
- reactjs - 如何让 React Material-UI 扩展面板向上打开?
- c++ - [CPP]为什么 Visual Studio 中的活动解决方案配置“调试”会出错?
- html - Angular 9 平台引导多个模块 - 在页面上运行多个应用程序
- visual-studio - 如何将 .NET Core 添加到 Visual Studio 2015 Pro
- android - 印地语/非英语单词显示不正确,使用字符串作为数据类型
- python - 在 Python 中解析单个 qouted 字典键和值