如何在 Material UI 中设置 TextField 的样式答案

【问题标题】：How to style TextField in MaterialUI如何在 Material UI 中设置 TextField 的样式
【发布时间】：2021-02-19 13:42:30
【问题描述】：

我正在使用样式化组件。我有这很好期待一件事..我想设置那个 TextField 的边框半径我该怎么做？

import React from 'react';
import TextField from '@material-ui/core/TextField';


const Input = ({label}) => {

    return (
        <div>
            <TextField style={{borderRadius: '90px'}} id="outlined-basic" label={label} variant="outlined" />
        </div>
    )
}

export default Input;

【问题讨论】：

在此处附加您的代码 sn-p
嗨，我更新了:)
尝试添加 style={{borderRadius: '10px'}}
它不起作用
更新你的代码 sn-p

标签： reactjs styles

【解决方案1】：

import React from "react";
import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';

const StyledTextField = withStyles({
    root: {
      '& .MuiOutlinedInput-root': {
        '& fieldset': {
          borderRadius: `90px`,
        },
      },
    },
})(TextField);

const Input = ({label}) => {

    return (
      <div>
        <StyledTextField id="outlined-basic" label={label} variant="outlined" />
      </div>
    )
}

export default Input;

【讨论】：