Как отключить основной цвет для FormLabel, когда группа переключателей сфокусирована? - PullRequest
Новая
       29

Как отключить основной цвет для FormLabel, когда группа переключателей сфокусирована?

1 голос
/ 16 января 2020

Когда элемент управления формой сфокусирован, тогда подсвечивается FormLabel. Как отключить основной цвет для FormLabel, когда группа радиокнопок сфокусирована, и вместо этого использовать черный?

enter image description here

const styles = {
  formLabel: {
    color: "#000"
  },
  formLabelFocused: {
    color: "#000"
  }
};

function App({ classes }) {
  return (
    <FormControl>
      <FormLabel
        classes={{ root: classes.formLabel, focused: classes.formLabelFocused }}
      >
        Options
      </FormLabel>
      <RadioGroup>
        {options.map(option => {
          const { value, label } = option;
          return (
            <FormControlLabel
              control={<Radio />}
              key={value}
              value={value}
              label={label}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
}

пример https://codesandbox.io/s/st-of-radio-31o2x

Ответы [ 2 ]

2 голосов
/ 16 января 2020

Если попытка переопределить стили по умолчанию для Material-UI не работает, следующий шаг - посмотреть, как определяются стили по умолчанию.

Ниже приведен отрывок из FormLabel. js, показывающий, как определяется сфокусированный стиль: 

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.secondary,
    '&$focused': {
      color: theme.palette.primary.main,
    },
  },
  /* Pseudo-class applied to the root element if `focused={true}`. */
  focused: {},
});

Эффект этого состоит в том, что сфокусированный цвет указывается в CSS правиле, например: 

.MuiFormLabel-root.Mui-focused {
  color: #3f51b5;
}

Эффект вашей попытки переопределения будет больше похож на: 

.Mui-focused {
  color: #000;
}

Стиль по умолчанию использует .Mui-focused вместе с .MuiFormLabel-root, чтобы гарантировать, что сфокусированный стиль имеет более высокую CSS специфичность чем несфокусированный стиль. Ваше переопределение, однако, имеет более низкую специфичность, чем сфокусированный стиль по умолчанию.

Вот модифицированная версия вашей песочницы, которая работает: 

import React from "react";
import {
  FormControl,
  FormLabel,
  RadioGroup,
  Radio,
  FormControlLabel,
  withStyles
} from "@material-ui/core";

const options = [...Array(4).keys()].map(item => {
  return { value: `value ${item}`, label: `label ${item}` };
});

const styles = {
  formLabel: {
    color: "#000",
    "&.Mui-focused": {
      color: "#000"
    }
  }
};

function App({ classes }) {
  return (
    <FormControl>
      <FormLabel classes={{ root: classes.formLabel }}>Options</FormLabel>
      <RadioGroup>
        {options.map(option => {
          const { value, label } = option;
          return (
            <FormControlLabel
              control={<Radio />}
              key={value}
              value={value}
              label={label}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
}

export default withStyles(styles)(App);

Edit Focused FormLabel

Ссылки по теме:

0 голосов
/ 16 января 2020

Вы можете добавить! Важный.

const styles = { formLabel: { color: "#000 !important" }, formLabelFocused: { color: "#000" } };

...