如何使用主题更改 Material UI Select 或 Menu MenuItem 悬停样式

Question

我创建了自己的主题 从 'material-ui/styles' 导入 { createMuiTheme };

export const MyTheme = createMuiTheme({
    palette: {
        primary: {
            light: '#757ce8',
            main: '#3f50b5',
            dark: '#002884',
            contrastText: '#fff',
        },
        secondary: {
            light: '#ff7961',
            main: '#f44336',
            dark: '#ba000d',
            contrastText: '#000',
        },
        error: {
            light: '#FF5F57',
            main: '#CE160C',
            dark: '#380300',
            //contrastText: will be calculated to contast with palette.primary.main
        }
    }
});

在我的应用中使用它

<MuiThemeProvider theme={MyTheme}>
    <AppContainer>
        <BrowserRouter children={ routes } basename={ baseUrl } />
    </AppContainer>
</MuiThemeProvider>

但是如何使用主题更改Menu 和Select 中的MenuItem 悬停样式？

Answer 1

使用主题实现悬停和选定项目样式

export const MyTheme = createMuiTheme({
    palette: {
        action: {
            selected: '#E7A615',
            hover: '#FFD371',
            disabled: '#9B9B9B'
        }
    }
});

Answer 2

您可以使用简单的 CSS 技巧来更改 MenuItem 悬停时的颜色

这里是示例代码

import React from 'react';
import './testJS.css'
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
class TestJS extends React.Component {
    constructor(props) {
    super(props);
}
render() {
    return(
        <div id="root">
            <Menu>
                <MenuItem primaryText="Maps" className="menu-item" />
                <MenuItem primaryText="Books" className="menu-item" />
                <MenuItem primaryText="Flights" className="menu-item" />
                <MenuItem primaryText="Apps" className="menu-item" />
            </Menu>
        </div>
    )};
}
export default TestJS;

并在您的 CSS 文件中添加以下行，需要使用 !important 以覆盖默认的材质-UI CSS

.menu-item{
   background: #dcdcdc !important;
}
.menu-item:hover{
   background: #0e7be9 !important;
}