我正在编写一个自定义 Material UI React 组件,我想传递一个 Icon
作为 Prop 。但是,我想在获得图标时对其进行样式设置,并将其设置为最小宽度和高度。
这是我正在尝试做的事情的简化版本。我要申请iconStyle
到作为 props.statusImage
传入的图标但无法弄清楚如何。
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
iconStyle: {
minWidth: 100,
minHeight: 100
}
});
function MyComponentWithIconProps(props) {
const styles = useStyles();
return <div>{props.statusImage}</div>;
}
MyComponentWithIconProps.propTypes = {
statusImage: PropTypes.element
};
export default MyComponentWithIconProps;
我使用这样的组件
import {Done} from "@material-ui/icons";
<MyComponentWithIconProps statusImage={<Done/>}
代码沙箱:https://codesandbox.io/s/jovial-fermi-dmb0p
我也试过包装提供的
Icon
在另一个 Icon
元素并尝试对其进行样式设置。然而,这并没有奏效,而且似乎有点“hacky”。
最佳答案
主要有以下三种选择:
Done
而不是 <Done/>
),然后添加 className
当您渲染元素时(这是 Fraction 的答案中的方法)。 className
支持它。 svg
)。 方法一:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";
function App() {
return (
<div className="App">
<MyComponentWithIconProps statusImage={Done} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
MyComponentWithIconProps.js
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
iconStyle: {
minWidth: 100,
minHeight: 100
}
});
function MyComponentWithIconProps(props) {
const styles = useStyles();
const StatusImage = props.statusImage;
return (
<div>
<StatusImage className={styles.iconStyle} />
</div>
);
}
MyComponentWithIconProps.propTypes = {
statusImage: PropTypes.element
};
export default MyComponentWithIconProps;
方法二:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";
function App() {
return (
<div className="App">
<MyComponentWithIconProps statusImage={<Done />} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
MyComponentWithIconProps.js
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
import clsx from "clsx";
const useStyles = makeStyles({
iconStyle: {
minWidth: 100,
minHeight: 100
}
});
function MyComponentWithIconProps(props) {
const styles = useStyles();
const styledImage = React.cloneElement(props.statusImage, {
// Using clsx to combine the new class name with any existing ones that may already be on the element
className: clsx(styles.iconStyle, props.statusImage.className)
});
return <div>{styledImage}</div>;
}
MyComponentWithIconProps.propTypes = {
statusImage: PropTypes.element
};
export default MyComponentWithIconProps;
方法三:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Done } from "@material-ui/icons";
import MyComponentWithIconProps from "./MyComponentWithIconProps";
function App() {
return (
<div className="App">
<MyComponentWithIconProps statusImage={<Done />} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
MyComponentWithIconProps.js
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
iconStyle: {
"& > svg": {
minWidth: 100,
minHeight: 100
}
}
});
function MyComponentWithIconProps(props) {
const styles = useStyles();
return <div className={styles.iconStyle}>{props.statusImage}</div>;
}
MyComponentWithIconProps.propTypes = {
statusImage: PropTypes.element
};
export default MyComponentWithIconProps;
关于reactjs - 如何设置作为 Prop 传递的 material-ui 图标的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58878858/