CODEWITHSUNDEEP
cssreactjstypescriptmaterial-ui
Art
Art

Reputation: 3167

How can I change Material UI Select or Menu MenuItem hover style using theme

I created my own theme import { createMuiTheme } from 'material-ui/styles';

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

Using it in my app

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

But how can I change MenuItem hover style in Menu and Select using a theme? Menu Select

Upvotes: 0

Views: 11115

Answers (2)

Art
Art

Reputation: 3167

Implemented hover and selected items styles using a theme

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

Upvotes: 7

Harsh Makadia
Harsh Makadia

Reputation: 3433

You can use simple CSS trick to change the MenuItem color on hover

Here is sample code 

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;

and add following lines in your CSS file, need to use !important in order to override the default material-UI CSS

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

Upvotes: -1

Related Questions