[英]Can't use “startIcon” & “endIcon” from <Button/> API of Material-UI
[英]Change size of startIcon / endIcon Material-UI
我正在 Material-UI 中创建一个主题,并且必须使用我们自己的一组图标 (SVG)。 但是,当插入带有startIcon
/ endIcon
的按钮时,图标会变得太小。 有什么方法可以增加图标的大小而不是字体。 最好从主题设置。
这是按钮的示例:
https://codesandbox.io/s/inspiring-spence-gsov0?file=/src/App.js
import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import { SvgIcon } from "@material-ui/core";
function CloudIcon(props) {
return (
<SvgIcon {...props}>
<svg viewBox="0 0 94 94" {...props}>
<title>{"B Circle"}</title>
<circle cx={47} cy={47} r={47} fill="#1700ff" />
<title>{"\uF0C2"}</title>
<path
d="M61.9 61.6h-29c-6.3 0-11.3-5.1-11.3-11.3 0-5 3.2-9.3 7.9-10.8.2-7.2 6.2-13.1 13.5-13.1 4.4 0 8.4 2.1 10.9 5.6 1.2-.6 2.5-.9 3.9-.9 5.1 0 9.3 4.2 9.3 9.3 0 .5 0 1-.1 1.5 3.3 1.9 5.4 5.4 5.4 9.2 0 5.8-4.7 10.5-10.5 10.5zM43 28.4c-6.3 0-11.5 5.2-11.5 11.5V41l-.8.2c-4.2 1-7.2 4.7-7.2 9.1 0 5.2 4.2 9.3 9.3 9.3h28.9c4.7 0 8.5-3.8 8.5-8.5 0-3.3-1.9-6.3-4.9-7.7l-.6-.4.2-.8c.1-.6.2-1.2.2-1.8 0-4-3.3-7.3-7.3-7.3-1.3 0-2.6.3-3.7 1l-.8.5-.5-.8c-2.2-3.4-5.8-5.4-9.8-5.4z"
fill="#fff"
/>
</svg>
</SvgIcon>
);
}
export default function App() {
return (
<div className="App">
<Button startIcon={<CloudIcon />} variant="outlined">
Test
</Button>
</div>
);
}
可以在此处找到图标大小的默认样式(如下所示): https : //github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button .js#L249 。 使用这三个中的哪一个取决于Button
的size
属性。 medium
是默认值。
/* Styles applied to the icon element if supplied and `size="small"`. */
iconSizeSmall: {
'& > *:first-child': {
fontSize: 18,
},
},
/* Styles applied to the icon element if supplied and `size="medium"`. */
iconSizeMedium: {
'& > *:first-child': {
fontSize: 20,
},
},
/* Styles applied to the icon element if supplied and `size="large"`. */
iconSizeLarge: {
'& > *:first-child': {
fontSize: 22,
},
},
下面是如何在主题中覆盖它的示例。
const theme = createMuiTheme({
overrides: {
MuiButton: {
iconSizeMedium: {
"& > *:first-child": {
fontSize: 22
}
}
}
}
});
我有同样的问题,如果您不想更改Theme
,这里有一个可能的解决方案。 您可以直接在组件级别覆盖嵌套的iconSizeMedium
CSS 样式。 这是一个示例,其中Button
用Typography
包裹,让它通过inherits
控制font-size
:
import Button from '@material-ui/core/Button';
import PhoneEnabledIcon from '@material-ui/icons/PhoneEnabled';
import { makeStyles } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
buttonRoot: {
fontSize: 'inherit', /* inherit from Typography */
},
myIconSizeMedium: {
"& > *:first-child": {
fontSize: 'inherit'
}
}
}));
export default function MyButton( {children} ) {
const classes = useStyles();
return (
<Typography color='textSecondary' variant="h6" >
<Button
startIcon={<PhoneEnabledIcon />}
className={classes.buttonRoot}
classes={{ iconSizeMedium: classes.myIconSizeMedium }}
>
{children}
</Button>
</Typography>
)
}
您可以使用规模:
import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import { SvgIcon } from "@material-ui/core";
function CloudIcon(props) {
return (
<SvgIcon {...props} style={{
transform: 'scale(1.5)' // Tune it
}}>
<svg viewBox="0 0 94 94" {...props}>
<title>{"B Circle"}</title>
<circle cx={47} cy={47} r={47} fill="#1700ff" />
<title>{"\uF0C2"}</title>
<path
d="M61.9 61.6h-29c-6.3 0-11.3-5.1-11.3-11.3 0-5 3.2-9.3 7.9-10.8.2-7.2 6.2-13.1 13.5-13.1 4.4 0 8.4 2.1 10.9 5.6 1.2-.6 2.5-.9 3.9-.9 5.1 0 9.3 4.2 9.3 9.3 0 .5 0 1-.1 1.5 3.3 1.9 5.4 5.4 5.4 9.2 0 5.8-4.7 10.5-10.5 10.5zM43 28.4c-6.3 0-11.5 5.2-11.5 11.5V41l-.8.2c-4.2 1-7.2 4.7-7.2 9.1 0 5.2 4.2 9.3 9.3 9.3h28.9c4.7 0 8.5-3.8 8.5-8.5 0-3.3-1.9-6.3-4.9-7.7l-.6-.4.2-.8c.1-.6.2-1.2.2-1.8 0-4-3.3-7.3-7.3-7.3-1.3 0-2.6.3-3.7 1l-.8.5-.5-.8c-2.2-3.4-5.8-5.4-9.8-5.4z"
fill="#fff"
/>
</svg>
</SvgIcon>
);
}
export default function App() {
return (
<div className="App">
<Button startIcon={<CloudIcon />} variant="outlined">
Test
</Button>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.