样式化组件按钮的 endIcon 如何样式化？

Question

这是我的简单样式按钮

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;
  }

Answer 1

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

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

Answer 2

我是这样解决的：

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

样式化组件按钮的 endIcon 如何样式化？

How style endIcon of styled-component button?

css

reactjs

material-ui

styled-components