我开始用情感js学习css-in-js。
有人可以告诉我两者之间是否确实有区别
const Component = Styled('div')`
color: 'red'
`;
和
const Component = () => (
<div className={css`color: red`}/>
)
看起来像所有Styled都可以做，可以用css + cx代替
答案 0 :(得分：0)
我认为主要区别在于function GetQueryStringParams(sParam) {
var sPageURL = window.location.hash.split("?")[1];
if (sPageURL == undefined) {
return ""
}
var sURLVariables = sPageURL.split("&");
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
只会生成具有
一组特定的CSS属性，而css需要一个组件来将样式附加到（例如您的示例中的styled）。
如果您想使用div为多个元素/不同元素设置样式，请
css如果您想使用const specificStyle = css`
color: red
`
<ComponentThatRendersADiv className={specificStyle} />
<ComponentThatRendersASpan className={specificStyle} />
<ComponentThatRendersAButton className={specificStyle} />
为某个组件设置样式并重复使用：
styled因此const ComponentThatRendersADiv = styled('div')`
color: red
`
const ComponentThatRendersASpan = ComponentThatRendersADiv.withComponent('span')
const ComponentThatRendersAButton = ComponentThatRendersADiv.withComponent('button')
<ComponentThatRendersADiv />
<ComponentThatRendersASpan />
<ComponentThatRendersAButton />
更像是编写CSS的典型方式，在该方式中，您可以创建应用于元素/组件的选择器。
css创建特定的成分/成分。
styled的文档：https://emotion.sh/docs/styled
styled的文档：https://emotion.sh/docs/css