问如何改变IconButton的颜色？
EN

Stack Overflow用户

提问于 2019-06-21 10:31:38

回答 2查看 3.1K关注 0票数 2

如何在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>
);

office-ui-fabric

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-22 01:31:41

这是一个代码演示：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'}
        }}
      />

票数 4

Stack Overflow用户

发布于 2020-10-10 03:47:48

与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'
              },
            }
          },
        }}
      />

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56696136

复制

相似问题

问如何改变IconButton的颜色？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变IconButton的颜色？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变IconButton的颜色？
EN