Question

我有以下代码，我尝试在菜单项中大写显示为标签的值，但不应用文本转换。有什么想法吗？

const values = ['some value', 'some value 2'];

<TextField
    id="status"
    name="status"
    select
    label="Status"
    onChange={this.handleSearch}
    value={filter.status}
    className={classes.textField}
>
    {campaignStatus.map(status => (
        <MenuItem key={status} value={status} style={{ textTransform: "capitalize" }}>
            {status}
        </MenuItem>
    ))}
</TextField>

Answer 1

这是因为材料ui具有其自己的覆盖样式系统，因此您必须使用此语法

import { makeStyles } from "@material-ui/core/styles";

const Function = props => {
  const useStyles = makeStyles(theme => ({
    center: {
      textTransform: "capitalize"
    }
  }));

  const classes = useStyles();

  const values = ["some value", "some value 2"];

  return (
    <TextField
      id="status"
      name="status"
      select
      label="Status"
      onChange={this.handleSearch}
      value={filter.status}
      className={classes.textField}
    >
      {campaignStatus.map(status => (
        <MenuItem key={status} value={status} className={classes.center}>
          {status}
        </MenuItem>
      ))}
    </TextField>
  );
};

MaterialUI TextField选择文本转换

1 个答案: