CODEWITHSUNDEEP
reactjsstyled-components
TLP
TLP

Reputation: 109

Styled Component Conditionnals not working properly

I am looking to style a component depending on a selected prop I pass to the component.

Nevertheless, following other answers on StackOverflow and Medium, the conditionnal style does not overwrite the base style.

I tried two solutions, that I included in the code below.

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

Is there a dumb mistake I am not seeing ?

Thanks in advance !

Upvotes: 1

Views: 1937

Answers (1)

Liudas Barčauskas
Liudas Barčauskas

Reputation: 131

I see that you're trying to use that property in <Container> component styles. To make that happen you should pass selected property down to the previously mentioned <Container> component.
check the edited code snippet below:

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

Upvotes: 1

Related Questions