2

我正在使用ReactJS的Material-UI 库构建一个应用程序。使用Theme Overrides API，我试图弄清楚如何全局设置组件的样式，但前提是它是另一个特定组件的子组件。

例如，我正在尝试MenuItem在菜单中设置 s的背景/文本颜色<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>的 a 覆盖它。<Typography>这对于非悬停、非选定状态来说很好，但是如果我将“选定”MenuItem设置为具有较暗背景，我需要它具有较浅的文本。

MUI 选择下拉菜单，带有深色选定项目和深色文本

这是我的主题文件：

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>使用道具将此样式传递给组件？由于这里的大多数样式都非常适合主题覆盖，这似乎是一种更好的方法，但也许我在滥用 API。

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

欢迎任何见解！谢谢！

4

3 回答 3

5

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

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

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

完整代码（来自您的 CodeSandbox）在这里：

编辑 MUI 如何：覆盖选项卡主题

于 2018-12-21T17:18:31.780 回答
0

首先，我认为我们不能在主题覆盖中做到这一点。主题覆盖是一种覆盖现有 Material-ui 组件的默认样式配置的方法。

其次，我认为您不需要使用条件语句使其过于复杂。没有那个也可以解决。我不明白为什么您需要使用<ListItemText>when<MenuItem>本身具有显示文本的功能。
只需简单地<ListItemText>从您的代码中删除，然后您就可以使用主题覆盖来根据需要修改您<MenuItem>的代码。

在这里找到修改后的代码：https ://codesandbox.io/s/30p3o4jjz5

让我知道这是否能澄清您的疑问。

于 2018-12-21T09:03:19.037 回答
0

是的，您可以使用 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

于 2019-02-28T04:43:27.600 回答