如何在MaterialUI中设置TextField的样式

时间:2020-11-06 20:23:29

标签: reactjs styles

我正在使用样式化的组件。 我有 这是一件好事。.我想为那个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;

1 个答案:

答案 0 :(得分:0)

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;