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

Question

我有一个表格，我想要显示标签有（*）或星。我想显示红色的星星我可以显示星是红色。

更多的事情为什么边界是“蓝色”当我点击input field这里是我的代码和截图https://codesandbox.io/s/8yxw2nyp52

我正在从url 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组件