Переопределение темы Material-UI: как переопределить стили детей в глобальном масштабе?

Question

Я создаю приложение с библиотекой Material-UI для ReactJS.Используя Theme Overrides API , я пытаюсь выяснить, как я могу глобально стилизовать компонент, но только когда это дочерний элемент другого определенного компонента.

Например, я 'я пытаюсь установить цвет фона / текста MenuItem с в меню <Select>, где каждый <MenuItem> содержит <listItemText>.Вот мой компонент:

import { MenuItem, Select, ListItemText } from '@material-ui/core';
import { MuiThemeProvider } from '@material-ui/core/styles';
import * as React from 'react';
import theme from './theme';

const MySelect = props => {
    return (
        <MuiThemeProvider theme={theme}>
            <Select variant="standard" value="2" open>
                <MenuItem value="1">
                    <ListItemText>One</ListItemText>
                </MenuItem>
                <MenuItem value="2">
                    <ListItemText>Two</ListItemText>
                </MenuItem>
                <MenuItem value="3">
                    <ListItemText>Three</ListItemText>
                </MenuItem>
                <MenuItem value="4">
                    <ListItemText>Four</ListItemText>
                </MenuItem>
            </Select>
        </MuiThemeProvider>
    );
};

export default MySelect;

К сожалению, применение цвета к <MenuItem> напрямую не работает, потому что <ListItemText> заменяет его на <Typography>, который имеет свой собственный набор цветов.Это хорошо для неоткрытого, невыбранного состояния, но если я выберу стиль "selected" MenuItem, чтобы он был темнее, мне нужно, чтобы текст был светлее.

Вот мой файл темы:

import { createMuiTheme, createStyles } from '@material-ui/core';

const myTheme = createMuiTheme({
    overrides: {
        MuiMenuItem: createStyles({
            root: {
                '&&:hover': {
                    backgroundColor: 'pink',
                    color: 'white'
                }
            },
            selected: {
                '&&': {
                    backgroundColor: 'blue',
                    color: 'white'
                },
                '&&:hover': {
                    backgroundColor: 'darkblue',
                    color: 'white'
                }
            }
        }),

        // How do I enforce this ONLY inside of MuiMenuItem and only for
        // the selected variant of that?
        MuiTypography: {
            subheading: {
                color: 'white'
            }
        }
    }
});

export default myTheme;

Итак, мой вопрос: есть ли способ сделать это, используя только переопределения тем?Или мне нужно условно передать этот стиль в компонент <ListItemText> с помощью реквизита?Поскольку большинство стилей здесь хорошо вписываются в Theme Overrides, это кажется более приятным способом сделать это, но, возможно, я неправильно использую API.

Рабочую демонстрацию моего кода выше смотрите: https://codesandbox.io/s/3r9mkxq231

Любое понимание приветствуется!Спасибо!

Answer 1

Один из способов достижения этого - нацеливание на дочерний html-элемент (например, диапазон для ListItemText) из стилей предка (в данном случае MenuItem).

Вот пример того, как стиль MenuItem.selectedможно указать:

  selected: {
    "&&": {
      backgroundColor: "blue",
      color: "white",
      "&& span": {
        color: "white"
      }
    },
    "&&:hover": {
      backgroundColor: "darkblue",
      color: "white"
    }
  }

Полный код (разветвленный из вашего CodeSandbox) находится здесь:

Answer 2

Да, вы можете сделать это в переопределении темы, используя jss-вложенный синтаксис:

const myTheme = createMuiTheme({
  overrides: {
    MuiMenuItem: createStyles({
      root: {
        "&&:hover": {
          backgroundColor: "pink",
          "& *": {
            color: "white"
          }
        }
      },
      selected: {
        "&&": {
          backgroundColor: "blue",
          "& *": {
            color: "white"
          }
        },
        "&&:hover": {
          backgroundColor: "darkblue",
          "& *": {
            color: "white"
          }
        }
      }
    })
  }
});

export default myTheme;

См. Рабочий код здесь: https://codesandbox.io/embed/308mk7k5x6?fontsize=14

Answer 3

Прежде всего, я не думаю, что мы можем сделать это в переопределениях темы.Переопределение темы - это способ переопределить стандартную конфигурацию стиля существующего компонента material-ui.

Во-вторых, я не думаю, что вам нужно делать это слишком сложно с условными утверждениями.Это может быть решено и без этого.Я не понял, зачем вам нужно было использовать <ListItemText>, когда само <MenuItem> имеет функцию для отображения текста.
Просто удалите <ListItemText> из своего кода, и затем вы можете использовать переопределения тем для изменения <MenuItem>как вам нравится.

Найдите здесь модифицированный код: https://codesandbox.io/s/30p3o4jjz5

Дайте мне знать, если это прояснит ваши сомнения.