我样式化的组件代码:
import React, { Component } from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";
import { theme } from "../shared/theme";
const ContainerDiv = styled.div`
padding-bottom: ${props => props.theme.paddings.text.small};
padding-top: ${props => props.theme.paddings.text.small};
padding-left: ${props => props.theme.paddings.text.normal};
padding-right: ${props => props.theme.paddings.text.normal};
font-size: ${props => {
if (props.bigLabel && props.bigLabel === true)
return props.theme.typography.sizes.big;
return props.theme.typography.sizes.normal;
}};
width: 100%;
font-weight: ${props =>
props.bold && props.bold === true ? "bold" : "normal"};
${props =>
props.type &&
props.type === "danger" &&
`
color: ${props => props.theme.colors.text.danger};
`}
${props =>
props.type &&
props.type === "primary" &&
`
color: ${props => props.theme.colors.text.primary};
`}
`;
class Text extends Component {
static propTypes = {
href: PropTypes.string,
bold: PropTypes.bool,
paragraph: PropTypes.bool,
type: PropTypes.string
};
render = () => {
let { href, bold, paragraph, type } = this.props;
let content = this.props.children;
if (paragraph && paragraph === true) content = <p>{content}</p>;
return (
<ThemeProvider theme={theme}>
<ContainerDiv href={href} bold={bold} type={type}>
{content}
</ContainerDiv>
</ThemeProvider>
);
};
}
export default Text;
应该使用type
属性来更改文本颜色,但是在我的测试中,未应用所需的颜色:
<Text type="primary">Primary text</Text>
<Text type="danger">Danger text</Text>
在两种情况下,颜色仍为默认颜色。
如何根据我的type
属性正确设置文本颜色?
答案 0 :(得分:1)
在props
声明中使用${props =>
时,您无需同时在内部函数中调用该函数,因为您可以从外部函数调用中访问props
。
所以这个:
${props =>
props.type &&
props.type === "danger" &&
`
color: ${props => props.theme.colors.text.danger};
`}
将成为这个:
${props =>
props.type &&
props.type === "danger" &&
`
color: ${props.theme.colors.text.danger};
`}
请注意,color
现在是color: ${props.theme.colors.text.danger};
,而不是color: ${props => props.theme.colors.text.danger}
另外,我会考虑使用另一个道具名称而不是type
,因为这将导致type
在HTML中呈现给DOM(因为type
是有效的HTML属性)。
另外,您可以放心地检查props.type === "danger"
,而不用先检查props.type
是否存在,结果是一样的。
所以${props => props.type === "danger" && ...your styles
答案 1 :(得分:0)
您不需要将颜色包装到另一个函数中,可以直接通过类型获取:
color: ${props => props.theme.colors.text[props.type]};
或者是否需要检查是否定义了type
:
color: ${props => props.type ? props.theme.colors.text[props.type]: '#FFFFFF'};