驼峰式CSS在样式化组件还是Emotion中用于常规React?

时间:2019-08-08 11:55:30

标签: css reactjs styled-components emotion

我主要使用React Native编程,它的 styled 属性继承了大多数CSS语法,并且使用驼峰大小写完成,例如:


    //...
    <Component style={styles.container} />

    //... 


const styles = StyleSheet.Create({
  container: {

    flexDirection: "column",
    backgroundColor: "white"
    //Etc...

  }
})

在这两个库中我似乎都找不到很好的文档来查看这种样式是否可以接受,如果可以,如何在Styled-Components或Emotion中为常规React实施该样式?

谢谢!

1 个答案:

答案 0 :(得分:1)

使用样式化的组件,您可以像普通的Invoke-RestMethod : The remote server returned an error: (401) Unauthorized. At line:1 char:1 + Invoke-RestMethod -Uri http://teamcity.my.domain.com/httpAuth/app/r ... + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-RestMethod], WebException + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeRestMethodCommand 一样使用它。

您还可以在a style cheat sheet中看到有关本机样式的信息。

您可以将内联样式用于reactjs,它将具有相似的sintax,但是有一些不同的选项,如您在docs中所见。

例如

css

请注意,不建议这样做,就像他们在文档中所说的那样:

  

... 通常不建议将style属性用作样式元素的主要方式。在大多数情况下,// camel case css const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; } 应该用于引用外部CSS样式表中定义的类。 className最常用于React应用程序中,以在渲染时添加动态计算的样式