如何在阅读颜色中显示*在反应+材质中？

Question

我有一种形式，要显示带有（*）或星号的标签。我想用红色显示星号，我可以显示星号是红色。

关于更多的事情，当我单击ErrorWebExceptionHandler时为什么边框为“蓝色”，这是我的代码和屏幕截图 https://codesandbox.io/s/8yxw2nyp52

我正在从以下网址获取帮助 https://material-ui.com/demos/text-fields/

Answer 1

您可以尝试使用*专用的span标签，并为其添加颜色。

请找到以下更新的解决方案以更好地了解

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import {
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Input,
  Grid,
  Button,
  FormHelperText
} from "@material-ui/core";

const styles = {
  formControl: {
    width: "100%"
  },
  searchForm_submit_button: {
    background: "#e40000",
    borderRadius: 0,
    color: "#FFF",
    fontSize: 20,
    fontWeight: 100,
    "&:hover": {
      background: "#a30000",
      borderColor: "#a30000"
    }
  }
};
const SearchForm = props => {
  const {
    form: { searchValue, circle, searchCriteria },
    handleInput,
    classes
  } = props;
  const style={color: 'red'};
  return (
    <div>
      <Grid item sm={6}>
        <form className="" noValidate autoComplete="off">
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor="circle">Circle <span style={style}>*</span></InputLabel>
            <Select
              value={circle}
              onChange={event => handleInput(event, "circle")}
              input={<Input name="circle" id="circle" />}
            >
              <MenuItem value="">
                <em>None</em>
              </MenuItem>

              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            <FormHelperText>Some important helper text</FormHelperText>
          </FormControl>

          <FormControl className={classes.formControl}>
            <InputLabel htmlFor="searchCriteria">SEARCH CRITERIA <span style={style}>*</span></InputLabel>
            <Select
              value={searchCriteria}
              onChange={event => handleInput(event, "searchCriteria")}
              input={<Input name="searchCriteria" id="searchCriteria" />}
            >
              <MenuItem selected disabled value="">
                <em>None</em>
              </MenuItem>
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            <FormHelperText>Some important helper text</FormHelperText>
          </FormControl>

          <FormControl className={classes.formControl}>
            <InputLabel htmlFor="searchValue">SEARCH VALUE <span style={style}>*</span></InputLabel>
            <TextField
              id="name"
              className=""
              value={searchValue}
              onChange={event => handleInput(event, "searchValue")}
              helperText="Some important text"
              margin="normal"
            />
          </FormControl>
          <Button
            variant="contained"
            className={classes.searchForm_submit_button}
          >
            Submit
          </Button>
        </form>
      </Grid>
    </div>
  );
};

export default withStyles(styles)(SearchForm);

这是在单击字段时看到的Material-UI给定的默认颜色。您需要使用mui-theme样式自定义material-ui组件