reactjs - Material-UI 主题覆盖 : How To Override Children Styles Globally?

Question

我正在使用 Material-UI library 构建一个应用程序对于 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> 覆盖它有自己的着色集。这对于非悬停、非选定状态很好，但如果我设置“选定”样式 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>组件使用 Prop ？由于这里的大部分样式都非常适合主题覆盖，这似乎是一种更好的方法，但也许我滥用了 API。

有关我上述代码的工作演示，请参阅:https://codesandbox.io/s/3r9mkxq231

欢迎任何见解!谢谢!

Answer 1

实现此目的的一种方法是从祖先样式(在本例中为 MenuItem)定位后代 html 元素(例如 ListItemText 的跨度)。

下面是如何指定 MenuItem.selected 样式的示例:

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

完整代码(从您的 CodeSandbox fork )在这里: