Question

我希望根据传递给组件的selected道具来为组件设置样式。

尽管如此，在关于StackOverflow和Medium的其他答案之后，条件样式不会覆盖基本样式。

我尝试了两种解决方案，这些解决方案包含在下面的代码中。

Parent.js

 <RoleSelectionCard icon='ux' text='User Experience' selected={true} />

Component.js

import React from "react"
import styled, { css } from "styled-components"
[...]

const Container = styled.div`

  height: 180px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;

------- First Variant
  box-shadow: 0 0 10px rgba(74, 134, 232, 0.4); // this one is rendered
  ${props =>
    props.selected &&
    css`
      box-shadow: 0 0 10px rgba(200, 134, 232, 1);
    `};

------- Second Variant
  box-shadow: ${props => {
        if (props.selected === true) {
          return " 0 0 10px rgba(74, 134, 232, 1)"
        }
        return " 0 0 10px rgba(74, 134, 232, 0.4)" // this one is rendered
      }};

  &:hover {
    box-shadow: 0 0 10px rgba(74, 134, 232, 0.8);
    transition: 0.3s;
  }


`
const Icon = styled.img`
  [...]
`
const Text = styled.span`
  [...]
`

class RoleSelectionCard extends React.Component {

  render() {
    console.log(this.props.selected) // outputs true
    const { text, icon } = this.props
    const iconToRender = [...]

    return (
      <div style={{ padding: 50 }}>
        <Container>
          <Icon src={iconToRender} />
          <Text>{text}</Text>
        </Container>
      </div>
    )
  }
}
export default RoleSelectionCard

我没有看到愚蠢的错误吗？

谢谢！

Answer 1

我看到您正在尝试在<Container>组件样式中使用该属性。为此，您应该将selected属性传递给前面提到的<Container>组件。
检查下面的已编辑代码段：

import React from "react"
import styled, { css } from "styled-components"
[...]

const Container = styled.div`

  height: 180px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;

------- First Variant
  box-shadow: 0 0 10px rgba(74, 134, 232, 0.4); // this one is rendered
  ${props =>
    props.selected &&
    css`
      box-shadow: 0 0 10px rgba(200, 134, 232, 1);
    `};

  &:hover {
    box-shadow: 0 0 10px rgba(74, 134, 232, 0.8);
    transition: 0.3s;
  }


`
const Icon = styled.img`
  [...]
`
const Text = styled.span`
  [...]
`

class RoleSelectionCard extends React.Component {

  render() {
    console.log(this.props.selected) // outputs true
    const { text, icon, selected } = this.props
    const iconToRender = [...]

    return (
      <div style={{ padding: 50 }}>
        <Container selected={selected}>
          <Icon src={iconToRender} />
          <Text>{text}</Text>
        </Container>
      </div>
    )
  }
}
export default RoleSelectionCard

样式化组件条件句无法正常工作

1 个答案: