Styled-Components 是一个流行的 React 库,用于通过 CSS-in-JS 的方式来创建样式化的组件。它允许开发者将 CSS 样式直接写在 JavaScript 文件中,并且可以动态地应用这些样式。
Styled-Components 提供了多种类型的组件:
Styled-Components 的属性被传递但不适应。
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.backgroundColor || 'blue'};
`;
// 使用时传递正确的属性名
<Button backgroundColor="red">Click me</Button>
const Button = styled.button`
font-size: ${props => props.fontSize || '16px'};
`;
// 使用时传递正确的属性类型
<Button fontSize="20px">Click me</Button>
const Button = styled.button`
background-color: ${props => props.backgroundColor || 'blue'};
color: ${props => props.color || 'white'};
`;
// 使用时传递正确的属性
<Button backgroundColor="red" color="yellow">Click me</Button>
通过以上方法,可以有效解决 Styled-Components 属性被传递但不适应的问题。
领取专属 10元无门槛券
手把手带您无忧上云