styled-component 按钮的endIcon 样式如何？

Posted 2023-03-15

【中文标题】styled-component 按钮的endIcon 样式如何？

【英文标题】：How style endIcon of styled-component button?

【发布时间】：2021-12-30 12:55:54

【问题描述】：

这是我的简单样式按钮

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ArrowForwardiosIcon from '@material-ui/icons/ArrowForwardIos';

const MyButton = styled(Button)`
  font-size: 11px;
`;

<MyButton
     variant="outlined"
     color="primary"
     size="small"
     disableElevation
     endIcon=<ArrowForwardIosIcon />
>
     CLICK ME
</MyButton>

那么我该如何改变 endIcon 的大小。我可以在 Chrome 开发工具中更改它，但不知道要添加到 MyButton 定义中的内容。假设它在样式按钮定义中应该是这样的：

  &.MuiButtonendIcon 
    color: green;
    font-size: 15px;
  

【参考方案1】：

您可以通过定位 svg 元素并像这样设置其 font-size 属性来设置单个 endIcon 的样式

 const MyButton = styled(Button)`
  & .MuiButton-endIcon svg 
    font-size: 50px;
    color: green;
  
`;

【讨论】：

对不起，它不起作用

理想情况下，它应该可以工作，请参考这个具有相同代码的codesandbox.io/s/vigorous-edison-2py6u?file=/src/App.js

是的..在您的示例中有效..似乎按钮类在我的代码中没有得到解决：.MuiButtonendIcon-0-56-59

【参考方案2】：

我是这样解决的：

 const MyButton = styled(Button)`
  *:first-of-type svg
    font-size: 50px;
    color: green;
  
`;