Блог

Главная - Вопросы по программированию - Как я могу применить белый цвет к значку пользовательского интерфейса Material?

Как я могу применить белый цвет к значку пользовательского интерфейса Material?

#reactjs #material-ui #icons

#reactjs ( реакция ) #материал-пользовательский интерфейс #Значки #reactjs

Вопрос:

Мне нужен значок белого карандаша, я делаю:

   <CreateIcon style={{ color: white[500] }} />

Но «белый» не существует в пользовательском интерфейсе материалаhttps://material-ui.com/customization/color/#official-color-tool

Как я могу использовать белый цвет?

Комментарии:

1. Не использовать свойства css

Ответ №1:

Самые простые два способа:

1)

 <CreateIcon style={{ color: '#fff' }} />

или

2)

 const useStyles = makeStyles((theme) => ({
  white: {
    color: theme.palette.common.white,
  },
}

В вашем компоненте:

 const classes = useStyles();
..
<CreateIcon className={classes.white}/>

Ответ №2:

Вы могли бы переопределить стиль

 const WhiteCreateIcon = withStyles({
  root: {
    color: "white"
  }
})(CreateIcon);

Демонстрация Codesandbox

Edit gallant-feynman-wiirn

Ответ №3:

Как вы, возможно, уже знаете, белый цвет имеет только один цвет ( #fff ). Если вы хотите иметь другой «оттенок» белого, вы можете использовать серый, если вы это имеете в виду.

 import grey from '@material-ui/core/colors/grey';

const useStyles = makeStyles((theme) => ({
  white: {
    color: grey[50],
  },
}

render() {
  const classes = useStyles();
  ...
  return <CreateIcon className={classes.white}/>;
}