css - 样式化组件中的驼峰式 CSS 还是常规 React 的情感？

Question

我主要使用 React Native 编程，其 styled 属性继承了大部分 CSS 语法并使用驼峰式大小写，例如:

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

    //... 


const styles = StyleSheet.Create({
  container: {

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

  }
})

我似乎无法在这两个库中找到好的文档来查看这种样式是否可以接受，如果可以，如何在 Styled-Components 或常规 React 的 Emotion 中实现它？

谢谢!

Answer 1

使用样式化组件，您可以像普通 css 一样使用它。

您还可以看到a style cheat sheet用于 react native 样式。

您可以为 reactjs 使用内联样式，它具有相似的语法，但有一些不同的选项，如您在 docs 中所见.

例如

// camel case css
const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

请注意，不推荐这样做，正如他们在文档中所说:

... using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. style is most often used in React applications to add dynamically-computed styles at render time