mui 图标可以改变描边宽度吗？

Question

我想自定义@mui/material 附带的图标。具体来说，是“空复选框”图标（以及空单选按钮）。我想让笔画变细。我尝试过设置笔划宽度、字体粗细、字体大小（这只会使其变小，而不是变薄）。这可能吗？ 如果可以的话，我想避免编辑底层路径。

Answer 1

这里有两种我一直在使用的方法：

1.用Material UI的sx造型方法

import ArrowBackIcon from '@mui/icons-material/ArrowBack';

<ArrowBackIcon
     sx={{ 
          stroke: "blue",
          strokeWidth: 2
     }}
/>

2.使用样式组件方法

我个人更喜欢这种方法，以从我的代码中排除一堆内联样式...并有助于允许所有样式包装到组件或其相关部分中。

import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import styled from "styled-components";

export const StyledArrowBack = styled(ArrowBackIcon)`
    stroke: blue;
    stroke-width: 2;
`;

Answer 2

空复选框

宽度，因为图标宽度取决于路径属性而不是描边值。 你可以检查这个链接

Answer 3

Answer 4

这会做什么？它将应用一些与背景颜色相同的描边宽度，这将掩盖 SVG 的宽度并使其看起来更薄。