javascript - 如何在 react + Material 中以阅读颜色显示*？

Question

我有一个表格，我想在其中显示带有 (*) 或星号的标签。我想显示红色的星号，我可以显示星号是红色的吗。

关于为什么单击 input field 时边框为“蓝色”的更多信息，这是我的代码和屏幕截图 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组件