在内部使用道具来响应样式化的组件

Question

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

Answer 1

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

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