如何自定义styled-components封装的MUI Button组件的endIcon样式

你之前的写法存在两处问题：

1. Material UI 给按钮endIcon容器预设的类名是MuiButton-endIcon，你拼写时漏了中间的短横线
2. &.类名的写法是选中同时匹配两个类名的元素，但endIcon是按钮的子元素，所以需要在&和类名之间加空格，选中后代元素

正确写法1：在styled组件内定义样式 #

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;
  /* 选中按钮内部的endIcon容器下的svg图标 */
  & .MuiButton-endIcon svg {
    color: green;
    font-size: 15px;
  }
`;

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

正确写法2：直接给图标组件加行内样式 #

如果不需要全局复用这个图标样式，也可以直接在传递endIcon参数的时候自定义样式：

<MyButton
     variant="outlined"
     color="primary"
     size="small"
     disableElevation
     endIcon={<ArrowForwardIosIcon style={{fontSize: '15px', color: 'green'}} />}
>
     CLICK ME
</MyButton>

内容的提问来源于stack exchange，提问作者John Glabb