如何更改IconButton中图标的颜色?主题中图标的颜色(使用主题设计器)为黑色,但是有时我需要显示白色的图标按钮。以下代码似乎并未将图标的颜色更改为白色
const iconStyle = {
root: {
color: theme.palette.white
}
};
return (
<div>
<div className={css(styles.close)}>
<IconButton iconProps={{ iconName: 'Close' }} styles={iconStyle} title="Close" ariaLabel="Close" />
</div>
<h4>{title}</h4>
<p>{narrative}</p>
{link}
</div>
);
答案 0 :(得分:1)
这是一个Codepen演示:https://codepen.io/vitalius1/pen/BgWmYZ
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
selectors: {
':hover .ms-Button-icon': {
color: 'red'
},
':active .ms-Button-icon': {
color: 'yellow'
}
}
},
rootHovered: {backgroundColor: 'black'},
rootPressed: {backgroundColor: 'black'}
}}
/>
答案 1 :(得分:0)
类似于Vitalie的回答,您可以这样做以避免使用rootHovered:https://codepen.io/Jlovett1/pen/vYKEQQd
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
margin: 0,
padding: 0,
selectors: {
'& .ms-Button-icon:hover, .ms-Button-flexContainer:hover': {
backgroundColor: 'black',
color: 'red'
},
}
},
}}
/>