CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
FatGuyLaughing
FatGuyLaughing

Reputation: 215

Assign styled-component CSS property based on props passed to component

I have two components TextField and Label.

The TextField is passing the prop req to the Label. I want to modify the styled-component based on the req prop being passed in. Here is my current code that is not working.

No errors are being reported to the console.

TextField.js

import React, {Component} from 'react';
import styled from 'styled-components';
import Label from '../Label/Label';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin: 16px 8px 8px 8px;
`;

const Input = styled.input`
  border-bottom: 1px solid rgba(0, 0, 0, .23);

  &:focus {
    border-bottom: 1px solid #2196f3;
  }
`;

class TextField extends Component {
  render() {
    const {
      label,
      req = true,
    } = this.props;

    return (
      <Wrapper>
        <Label req={req} text={label}/>
        <Input type={'textfield'}/>
      </Wrapper>
    );
  }
}

export default TextField;

Label.js

import React, {Component} from 'react';
import styled from 'styled-components';

const LabelBase = styled.label`
  color: rgba(0, 0, 0, .54);
  font-size: 1rem;
  line-height: 1;

  &:after {
    content: ${props => props.req ? '*' : ''};
  }
`;

class Label extends Component {
  render() {
    const {
      req,
      text,
    } = this.props;

    return (
      <LabelBase req={req}>{text}</LabelBase>
    );
  }
}

export default Label;

Upvotes: 0

Views: 1340

Answers (1)

Jonathan Rys
Jonathan Rys

Reputation: 1866

You say you want to style the component based on the ref prop, but it seems that you're using that prop as a boolean to add text, not styles so I just went with a simplified solution for that since psuedo-selectors like :after aren't supported in React's JS styles. There are other ways around that if need be, but I think you can just do the following. However, I've included a way to pass styles to the child component as well for your reference:

class Label extends React.Component {

  render() {
    const {
      req,
      text,
      moreStyles
    } = this.props;

    const styles = {
      "color": "rgba(0, 0, 0, .54)",
      "fontSize": "1rem",
      "lineHeight": 1
    }

    return (
      <div style={{...styles, ...moreStyles}}>{text + (req ? '*' : '')}</div>
    );
  }
}

ReactDOM.render(<Label text="test" req="Yes" moreStyles={{"backgroundColor": "blue", "border": "1px solid black"}}/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 2

Related Questions