是否可以使用样式组件中的 if 语句切换 css 属性的值？

Posted 2023-02-22

【中文标题】是否可以使用样式组件中的 if 语句切换 css 属性的值？

【英文标题】：Is it possible to switch the value of a css property using an if statement in styled-components?

【发布时间】：2021-01-06 21:53:57

【问题描述】：

我正在尝试使用 CSS after 选择器在标签末尾显示“必需”或“可选”的标签。我的想法是看起来像这样。

我正在使用 React.js 和 styled-components 库，所以我将 props.required 作为参数，当 props.required == true 时为“必需”，当 props.required == 时为“必需” false 我尝试切换显示，比如“可选”。

// form.js
<FormTitle required=true>Name</FormTitle>
<FormTitle required=false>Phone Number</FormTitle>


// styles.js
import styled from 'styled-components'
const FormTitle = styled.div`
  ...
  &:after 
    content: $props => props.required ? "required": "optional";
    background-color: $props => props.required ? "#FF0101": "#6FC173";
    ...
  
`

但是当我这样做时，标签没有出现。

显然，用javascript的if语句切换CSS的content属性会导致问题。因为如果您不对 content 属性使用 if 语句，其他一切都可以正常工作。

  ...
  &:after 
    content: "required";
    background-color: $props => props.required ? "#FF0101": "#6FC173";
    ...
  
`

有没有办法解决这个问题？

【参考方案1】：

content 属性要求值用引号括起来。用标准引号将表达式括起来：

const FormTitle = styled.div`
  ::after 
    content: '$props => props.required ? "required": "optional"';
    background-color: $props => props.required ? "#FF0101": "#6FC173";
  
`

另一种选择是使用样式组件.attrs()在元素上设置一个数据属性，然后使用该属性的值作为伪元素的内容（::after）：

const FormTitle = styled.div.attrs(props => (
  'data-required': props.required ? 'required': 'optional',
))`
  &::after 
    content: attr(data-required);
    background-color: $props => props.required ? "#FF0101": "#6FC173";
  
`

示例 - Sandbox

【讨论】：

感谢您的快速回答。你的解释完美解决了我的问题。