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

【问题标题】：How style endIcon of styled-component button?styled-component 按钮的endIcon 样式如何？
【发布时间】：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;
  }

【问题讨论】：

标签： css reactjs material-ui styled-components

【解决方案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;
  }
`;

【讨论】：