我正在尝试构建一个简单的组件,该组件将title和Icon Component作为道具并进行渲染。我在这里使用的图标是第三方组件,例如Material UI中的组件。
option.component.jsx
import { Wrapper } from './option.styles';
function Option({ title, Icon }) {
return (
<Wrapper>
{Icon && <Icon />}
<h4>{title}</h4>
</Wrapper>
);
}
option.styles.js
import styled from 'styled-components';
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: white;
}
`;
// export const Icon =
我将所有样式都整理在一个单独的文件中,我打算保持这种方式。
我想设置<Icon />
的样式,但是我不想在这样的Option Component中进行设置。
import styled from 'styled-components';
import { Wrapper } from './option.styles';
function Option({ title, Icon }) {
const IconStyled = styled(Icon)`
margin-right: 10px;
`;
return (
<Wrapper>
{Icon && <IconStyled />}
<h4>{title}</h4>
</Wrapper>
);
}
在维护此文件组织的同时,对作为道具传递的组件进行样式设置的最佳方法是什么?
我浏览了文档,但找不到与此相关的任何内容。任何帮助将不胜感激。
答案 0 :(得分:1)
您可以通过两种方式执行此操作:
1。作为SVG图标(svg-icon):
option.styles.js 为:
import styled from "styled-components";
import SvgIcon from "@material-ui/core/SvgIcon";
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: black;
}
`;
export const IconStyled = styled(SvgIcon)`
margin-right: 10px;
`;
然后在您的组件中执行以下操作:
import { Wrapper, IconStyled } from "./option.styles";
function Option({ title, Icon }) {
return (
<Wrapper>
{Icon && <IconStyled component={Icon} />}
<h4>{title}</h4>
</Wrapper>
);
}
const App = () => {
return (
<>
<Option title="title" Icon={HomeIcon}></Option>
<Option title="title" Icon={AccessAlarmIcon}></Option>
</>
);
};
2。作为字体图标(font-icons):
在<head>
中导入材料图标
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
option.styles.js 为:
import styled from "styled-components";
import Icon from "@material-ui/core/Icon";
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: black;
}
`;
export const IconStyled = styled(Icon)`
margin-right: 10px;
`;
然后在您的组件中执行以下操作:
import { Wrapper, IconStyled } from "./option.styles";
function Option({ title, icon }) {
return (
<Wrapper>
{icon && <IconStyled>{icon}</IconStyled>}
<h4>{title}</h4>
</Wrapper>
);
}
const App = () => {
return (
<>
<Option title="title" icon='star'></Option>
<Option title="title" icon='home'></Option>
</>
);
};