无法更改文本字段变体的边框半径=填充 Material-ui-core答案

【问题标题】：Can't change border radius of text-field variant=filled in Material-ui-core无法更改文本字段变体的边框半径=填充 Material-ui-core
【发布时间】：2020-02-08 21:14:30
【问题描述】：

当前行为????

我目前的组件如下

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  border-radius: 50px;
`;

我的使用方法如下：

<BirthdayTextFields
                      id="filled-dense-hidden-label"
                      margin="dense"
                      hiddenLabel
                      variant="filled"
                      placeholder="18"
                      inputProps={{ 'aria-label': 'dense hidden label' }}
                      onChange={this.handleChange('day')}
                    />

由于 variant="failed" 它不允许我设置边框半径，我尝试通过以下技巧覆盖 TextField 组件的规则：

export const TextFieldWrapper = styled(TextField)`
  fieldset {
    border-radius: 50px;
  }
`;

我就是这样使用的，因为它是变体=概述了覆盖工作

<TextFieldWrapper
                  id="outlined-dense"
                  label="Last name"
                  margin="dense"
                  variant="outlined"
                  onChange={this.handleChange('lastName')}
                />

那么如何解决呢？我也尝试将字段集值添加到 BirthdayTextFields 但它没有产生任何效果，主要是因为 variant="filled"

export const BirthdayTextFields = styled(TextField)`
  width: 80px;
  margin-right: 10px;
  fieldset {
    border-radius: 50px;
  }
`;

环境

Windows 10

技术：版本

材质-UI：^3.9.3

反应：^16.8.6

浏览器：Chrome

【问题讨论】：

标签： javascript css reactjs material-ui styled-components

【解决方案1】：

您尝试过使用<FilledInput> 吗？

const useStyles = makeStyles(theme => ({
  root: {
    borderRadius: "50px 50px 0 0"
  },
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  }
}));

export default function FilledTextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: "Cat in the Hat",
    age: "",
    multiline: "Controlled",
    currency: "EUR"
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <FilledInput
        id="filled-name"
        label="Name"
        className={classes.textField}
        value={values.name}
        onChange={handleChange("name")}
        margin="normal"
        variant="filled"
        classes={{
          root: classes.root
        }}
      />
    </form>

https://codesandbox.io/embed/material-demo-sos7s

【讨论】：

没有尝试过这种方法，因为我不知道可以这样使用类，有什么方法可以用 styled-components 方式编写它吗？否则我会像你在这里展示的那样写所有的css
我已经尝试在该 styles.js 文件中添加 makeStyles 逻辑，但由于它没有被调用，它给出了一个错误，说 ``` TypeError: Object(...) is not a function at Module.componentsSignInStyleJs (webpack:///components/SignIn/style.js:52:1) ``` 而且这些组件大多是基于类的而不是功能组件，所以对我来说将它们转换成功能组件有点困难它执行相同的功能。
makeStyles 是 Material UI 的 V4 特性。如果您使用的是较低版本，则可以将其包装在 withStyles HOC 中。这对于基于类的组件和功能组件可以正常工作。 material-ui.com/styles/advanced
我正在研究这种方法：codesandbox.io/s/skrw9 和 withStyles 但问题是 TextField 只是我的大组件中的一件事，它也包裹在 export default connect(mapStateToProps)(SignIn); 周围，所以我应该把它包裹起来整个声明与withStyle(styleObject)(MyReduxComponent) ?

【解决方案2】：

我无法访问应用边框半径的大纲容器，因此我使用了 CSS 方法。

<TextField className="inputRounded" placeholder="Search" variant="outlined" />

然后我在项目的index.css文件中添加了borderRadius代码。

.inputRounded .MuiOutlinedInput-root{
   border-radius: 50px;
}

【讨论】：

'& .MuiOutlinedInput-root':{borderRadius:10}

【解决方案3】：

const useStyles = makeStyles({
   root: {
      [`& fieldset`]: {
            borderRadius: 15,
      },
   },
});

<TextField
  className={classes.root}
  id="inputRounded"
  label="Email address"
  variant="outlined"
  fullWidth
/>

【讨论】：

这是当我们知道 TextField 实际上呈现 DOM 内的字段集时。这种方法更像是知道在其中一个子元素中呈现的内部类。非常好的快速解决方法。不能复制。

【解决方案4】：

您必须使用浏览器开发工具来识别要覆盖的组件的插槽。完成后，您可以编写一个带有您想要更改的类的 CSS 文件。

你可以使用强制类：

!重要

文件：styles.css

.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
    border-radius: 50px!important;
}

【讨论】：