CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
Dimitry Ivashchuk
Dimitry Ivashchuk

Reputation: 625

Using props inside react styled components

I am using React styled-components library to style my application and stumbled on a problem, that I can not assign a CSS property based on props passed to component.

import React from 'react'
import styled from 'styled-components'

const Bar = styled.div`
  width: ${props => props.fraction}px;
`
const bar = (props) => {
return (
  <Bar>{props.fraction}</Bar>
  )
};

export default bar

Fraction props is passed from parent component and outputs perfectly inside the styled component, but the width property assigned in styles is crossed in developer tools having only px there, so the fraction number does not even get there.

I would appreciate any help! Thanks a lot

Upvotes: 0

Views: 195

Answers (1)

Nazar Litvin
Nazar Litvin

Reputation: 778

You should pass fraction as a property to Bar component, like this:

cost BarComponent = ({ fraction }) => (
  <Bar fraction={fraction}>{fraction}</Bar>
);

Upvotes: 1

Related Questions