как показать * в прочитанном цвете в реакции + материал

Question

У меня есть форма, в которой я хочу показать метку, имеющую (*) или звездочку. Я хочу показать звезду красным цветом, могу ли я показать звезду красного цвета.

Более подробно о том, почему граница становится синей, когда я нажимаю input field, вот мой код и скриншот https://codesandbox.io/s/8yxw2nyp52

Я принимаю помощь снизу URL https://material -ui.com / демки / текстовые поля /

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