Reactjs 已设置样式的组件条件无法正常工作

我希望根据传递给组件的

选定的
道具来设置组件样式

然而，在其他关于StackOverflow和Medium的回答之后，Conditional样式不会覆盖基本样式

我尝试了两种解决方案，包括在下面的代码中

Parent.js

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

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



Component.js

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

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

从“React”导入React
导入样式化，{css}来自“样式化组件”
[...]
const Container=styled.div`
高度：180像素；
宽度：180px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
边界半径：8px；
-------第一变体
长方体阴影：0 0 10px rgba（74、134、232、0.4）；//这个是渲染的
${props=>
道具&&
css`
盒影：0 10像素rgba（200、134、232、1）；
`};
-------第二种变体
方块阴影：${props=>{
if（props.selected==true）{
返回“0 0 10px rgba（74、134、232、1）”
}
返回“0 0 10px rgba（74、134、232、0.4）”//将渲染此图像
}};
&：悬停{
盒影：0 0 10像素rgba（74,134,232,0.8）；
过渡：0.3s；
}
`
常量图标=styled.img`
[...]
`
const Text=styled.span`
[...]
`
类角色选择卡扩展React.Component{
render（）{
console.log（this.props.selected）//输出true
const{text，icon}=this.props
常量iconToRender=[…]
返回(
{text}
)
}
}
导出默认角色选择卡

难道我没有看到一个愚蠢的错误吗

提前谢谢
 我看到您试图在组件样式中使用该属性。要做到这一点，您应该将
selected
属性向下传递到前面提到的
组件。

检查下面已编辑的代码段：

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

从“React”导入React
导入样式化，{css}来自“样式化组件”
[...]
const Container=styled.div`
高度：180像素；
宽度：180px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
边界半径：8px；
-------第一变体
长方体阴影：0 0 10px rgba（74、134、232、0.4）；//这个是渲染的
${props=>
道具&&
css`
盒影：0 10像素rgba（200、134、232、1）；
`};
&：悬停{
盒影：0 0 10像素rgba（74,134,232,0.8）；
过渡：0.3s；
}
`
常量图标=styled.img`
[...]
`
const Text=styled.span`
[...]
`
类角色选择卡扩展React.Component{
render（）{
console.log（this.props.selected）//输出true
const{text，icon，selected}=this.props
常量iconToRender=[…]
返回(
{text}
)
}
}
导出默认角色选择卡
的确如此。非常感谢你！我想我现在要休息一下。。。