不同使用方法的优势

与框架无关的方式是使用Emotion最简单的方法，这种方法主要具备以下特点。

• 不需要任何额外的配置步骤，包括Babel插件配置、配置文件配置等。
• 支持媒体查询、嵌套选择器等。
• 使用css生成的样式在cx的辅助下可以与既有的任何样式类组合。

但是与框架无关的使用方式也有其不足之处，例如在使用服务端渲染时，就需要进行额外的配置。

与React最搭配的方式是使用@emotion/react的方式，也是Emotion最推荐使用的方式。这种方式主要有以下特点。

• 可以使用可配置式的生成环境。
• css属性可以支持以下特性：
  • 使用方式与style属性类似，但是可以支持嵌套选择器、媒体查询等。
  • 允许开发人员直接对组件和元素设置样式。
  • css属性可以接受一个可以与主题一起使用的函数。
  • 减少编写样式时的样板文件。
• 在使用服务端渲染的时候无需任何配置。
• 主题功能开箱即用。
• 拥有比较完善的ESLint插件支持。