条件道具内的样式化组件道具

Question

我的样式组件代码：

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 属性正确设置文字颜色？

Answer 1

不需要把color换成别的函数，直接按类型获取即可：

  color: ${props => props.theme.colors.text[props.type]};

或者如果您需要检查是否定义了 type：

  color: ${props => props.type ? props.theme.colors.text[props.type]: '#FFFFFF'};

Answer 2

在 ${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

条件道具内的样式化组件道具

Styled components props inside conditional props

css

reactjs

styled-components