[英]creating css rule with “Styled-Components”
I am using the awesome "Styled-Components" 我正在使用很棒的“样式化组件”
but I am now using another package that wraps an element inside it so I can't push my StyledComponents there as I don't want to change his package. 但是我现在正在使用另一个将元素包装在其中的包,因此我不想将他的StyledComponents推送到那里,因为我不想更改他的包。
I saw glamor has a nice trick. 我看到魅力有一个不错的窍门。 Is that supported with StyledComponents?
StyledComponents支持吗?
import { css } from 'glamor';
let rule = css({
color: 'red',
})
<div {...rule}>
zomg
</div>
If you think about why I need it, here is an example: this is an external package I'm using: 如果您考虑我为什么需要它,请举一个例子:这是我正在使用的外部软件包:
External = props => (
<div>
<input style={props.inputStyle} className={props.inputClass} />
</div>
);
so you can see I need to pass in a json style or className 这样您就可以看到我需要传递json样式或className
so Glamor will work here, but I dont want to use it just for this scenario. 因此,魅力将在这里工作,但我不想仅在这种情况下使用它。 I'm already enjoying StyledComponent
我已经很喜欢StyledComponent
Thanks 谢谢
If I understood your query, you can define css rules to a component, like this 如果我了解您的查询,则可以为组件定义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>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.