logtrace / material-icons-react

Google material icons implementation for React
MIT License
24 stars 16 forks source link

Changing inline styles #22

Open manuelbasanta opened 6 years ago

manuelbasanta commented 6 years ago

I have a p tag that shows an icon if mouse is over:

const editStyle = {
    position: 'fixed',
    bottom: 0,
    left: 0,
    color: 'black'
};
<p onMouseOver={this.mouseOver} onMouseOut={this.mouseOut} >
       {this.props.data.desc}
       {this.state.editShown && <MaterialIcon icon="edit" style={editStyle}/>}
</p>

But i get this error if I mouseOver twice: index.js:51 Uncaught TypeError: Cannot assign to read only property 'color' of object '#'

Is this re right way of modifying the style of an icon?

sithumn commented 6 years ago

Hi @manuelbasanta ,

Sorry for being late to reply. I think this should be added as a feature in the lib. I will work on that and release a version ASAP.

Wgil commented 6 years ago

I'm having the same issue.

My code: <MaterialIcon icon={icon} color={color} size={size} style={{ backgroundColor }} /> The problem is in this line var styleOverride = Object.assign(propStyle, { color: color ? color : '', fontSize: sizeMapped });

GeoffGodwin commented 5 years ago

I've also run into this issue. @sithumn is this still a planned update?

winniezzz commented 1 month ago

same here, can't assign a color