在里面使用道具反应风格的组件

时间:2018-06-16 10:40:15

标签: javascript css reactjs styled-components

我正在使用React样式组件库来设置应用程序的样式并偶然发现问题,我无法根据传递给组件的props分配CSS属性。

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从父组件传递并在样式化组件内完美输出,但样式中指定的width属性在只有px的开发人员工具中交叉,所以分数甚至没有到达那里。

我将不胜感激任何帮助! 非常感谢

1 个答案:

答案 0 :(得分:1)

您应该将fraction作为属性传递给Bar组件,如下所示:

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