如何传播样式对象传递到一个样式组件作为一个道具?

Question

我有一个自定义文本组件，它采用可选的样式props:

<TextComponent style={{ color: 'red' }}>Test</TextComponent>

然后我基于变体生成样式化组件的CSS，但我还想以某种方式应用可能作为prop传递的自定义可选样式。我想我需要把它散布到某个地方，但我不知道在哪里。

const TextComponent = ({ style, ...rest }) => {
return <StyledText {...rest} />;
};
const StyledText = styled.Text`
fontFamily: ${(props: any) => styles.text.fontFamily};
color: ${(props: any) => styles.text.color};
fontWeight: ${(props: any) => styles.text.fontWeight};
fontSize: ${(props: any) => styles.text.fontSize};
lineHeight: ${(props: any) => styles.text.lineHeight};
`;
export default TextComponent;

Answer 1

试试这个。样式组件可以接受对象而不是字符串。

const styles = {
h1: {
fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
color: colors.gray900,
fontWeight: '300',
fontSize: '36px',
lineHeight: '40px',
},
h2: {
fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
color: colors.gray900,
fontWeight: '300',
fontSize: '30px',
lineHeight: '39px',
},
h3: {
fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
color: colors.gray900,
fontWeight: '300',
fontSize: '24px',
lineHeight: '34px',
}
};
const Component = styled.div(p => ({
fontFamily: styles[p.variant].fontFamily,
color: styles[p.variant].color,
fontWeight: styles[p.variant].fontWeight,
fontSize: styles[p.variant].fontSize,
lineHeight: styles[p.variant].lineHeight
}))
const App = () =>
<div>
<Component variant="h1">Component</Component>
</div>;