Question

我创建了自己的主题从＆＃39; material-ui / styles＆＃39;;

导入{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>

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

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;
}

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

2 个答案: