我使用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
分数道具从父组件传递并在样式化组件内完美输出,但样式中指定的宽度属性在仅具有px的开发人员工具中交叉,因此分数编号甚至没有到达那里。
我将不胜感激任何帮助!非常感谢
您应该将fraction
作为属性传递给Bar组件,如下所示:
cost BarComponent = ({ fraction }) => (
<Bar fraction={fraction}>{fraction}</Bar>
);