[英]How do you invert the primary and background colors of a material-ui icon?
You can find the code that controls the display of the icons in the dialog that pops up from the icon-search portion of the documentation here: https://github.com/mui/material-ui/blob/v5.11.6/docs/data/material/components/material-icons/SearchIcons.js#L233您可以在文档的图标搜索部分弹出的对话框中找到控制图标显示的代码: https://github.com/mui/material-ui/blob/v5.11.6/docs /data/material/components/material-icons/SearchIcons.js#L233
Below is an example that applies equivalent styling using the sx
prop.下面是一个使用
sx
应用等效样式的示例。 The key aspect is setting the color
and background-color
appropriately in the styling.关键方面是在样式中适当地设置
color
和background-color
。 The rest of the styling just controls the size and shape of the box the icon is in.样式的 rest 只是控制图标所在框的大小和形状。
import * as React from "react";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
export default function SvgIconsColor() {
return (
<>
<ArrowForwardIosIcon
sx={{
margin: 0.5,
px: 2,
py: 1,
borderRadius: 1,
boxSizing: "content-box",
color: "primary.main"
}}
/>
<ArrowForwardIosIcon
sx={{
margin: 0.5,
px: 2,
py: 1,
borderRadius: 1,
boxSizing: "content-box",
color: "primary.contrastText",
backgroundColor: "primary.main"
}}
/>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.