Category: CSS

Overwrite Selected Tree View Item Styles – Material UI ReactJS

Hi everyone,

Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS:

treeItem: {
paddingTop: theme.spacing(1),
‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: {
backgroundColor: ‘red’,
}
},

This will make the background color red for ONLY the selected item:
material-ui-tree-view

Cheers,
Chris

Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows: 


const styles = theme => ({
    ...
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'
        }
    }

Then just reference it as you normally would:


const styles = theme => ({

const { classes } = this.props;

How to Add a FontAwesome Icon using :after

Hey everyone,

Just a quick post on how to add a fontawesome icon using :after:


.fl-cart-product-price:after{
content: 'f00d';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin: 0px 0px 0px 10px;
color: #555;
font-size: 85%;
text-decoration: none;
}

See this stackoverflow post for more info: http://stackoverflow.com/a/18793584/522859