我正在使用很棒的“Styled-Components”
但我现在正在使用另一个包,其中包含一个元素,所以我不能将我的 StyledComponents 推到那里,因为我不想更改他的包。
我看到魅力有一个很好的把戏。 StyledComponents 支持吗?
import { css } from 'glamor';
let rule = css({
color: 'red',
})
<div {...rule}>
zomg
</div>
如果你想过我为什么需要它,这里有一个例子: 这是我正在使用的外部包:
External = props => (
<div>
<input style={props.inputStyle} className={props.inputClass} />
</div>
);
所以你可以看到我需要传入一个json样式或者className
所以 Glamour 可以在这里工作,但我不想只在这种情况下使用它。 我已经在享受 StyledComponent
谢谢
最佳答案
如果我理解您的查询,您可以像这样为组件定义 css 规则
import styled from 'styled-components'
const Wrapper = styled.div`
color: 'red';
font-weight: bold;
background-color: ${ props => props.color === 'primary' ? 'green' : 'red' }
`
export const Component = () => {
<Wrapper color='primary'>
I have a red text, and bold font-weight.
</Wrapper>
}
关于javascript - 使用 "Styled-Components"创建 css 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49863718/