时间戳

首页 > 解决方案 > 无法更改文本字段变体的边框半径=填充 Material-ui-core

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

问题描述

当前行为

我当前的组件如下

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;
  }
`;

我正在这样使用，因为它是variant=概述了覆盖的作品

<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;
  }
`;

环境

视窗 10

技术：版本

材质-UI：^3.9.3

反应：^16.8.6

浏览器：铬

标签： javascriptcssreactjsmaterial-uistyled-components

解决方案

你试过使用<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

推荐阅读