react组件

const Test = (props) => {

    return (
        <Text before={12345}>
            {props.children}
        </Text>
    );

};

样式组件（不工作）

const Text = styled.span`

    &:before {
        content: ${props => {
            console.log(props.before); // I see '12345' in log.
            return props.before;
            }
    }


`;

样式组件（这很好用）

const Text = styled.span`

    &:before {
        content: '12345'
    }


`;

3个回答

那是因为content值必须在 css 中的引号内

例子：

const Block = styled.div`
    &:before {
        display: absolute;
        top:0;
        content: '${props => props.before}'
    }
`

请注意，我正在利用ES6 的新功能，其中单个语句函数无需使用大括号{}和return.

代码笔：https ://codepen.io/metju/pen/zEKeOm

我所做的是为此使用 css helper 函数：

const Text = styled.span`
  &:before {
     ${props => !!props.before ?
      css`content: props.before;` : css`content: ' 🦄'';`
     };
  }
`

styled-components 和 sass 一样，没什么不同

const Text = styled.span`
    &:before {
       content: ${props => !!props.before ? props.before : " 🦄"};
    }

我是一个 // 渲染：“我是一个 🦄”

引用自与样式组件一起使用的 Before 和 After 伪类

其它你可能感兴趣的问题

上一篇ReactJS：在数组元素中给出键的最佳方法是什么下一篇如何防止底板滑落？