FluentUI/react-northstar组件中style与styles属性的区别是什么

两者核心区别在于是否走组件库自身的样式渲染体系，具体差异如下：

• style 是React框架原生提供的DOM属性
  组件会把你传入的样式对象直接透传到最终渲染的根DOM节点上，行为和给普通HTML标签写内联样式完全一致，仅对组件最外层根元素生效，不会经过组件库的任何样式处理。它的类型是标准的React.CSSProperties，只支持传静态样式对象，拿不到组件内部状态、主题变量，也没法给组件的内部插槽元素加样式。
• styles 是Northstar组件库自定义的扩展属性，官方定义类型为ComponentSlotStyle
  传入的样式会进入组件库的样式渲染管线处理：既支持传普通静态样式对象，也支持传函数，函数入参可以拿到当前组件的props、内置渲染状态、全局主题配置变量，方便做主题适配、状态联动样式；除了根元素，还可以通过插槽名精准指定组件内部各个子元素的样式，不需要额外写CSS选择器穿透。

实际使用表现 #

你举的两个示例，在「仅给Flex根元素加固定上边距」这个极简场景下，最终视觉效果几乎没有区别：

// 简单静态样式场景下两者效果接近
<Flex styles={{ marginTop: 15 }}></Flex>
<Flex style={{ marginTop: 15 }}></Flex>

但遇到以下场景时，只有styles可以实现需求，style完全不支持：

<Flex 
  styles={(_, theme) => ({
    // 直接读取主题里定义的标准间距变量，切换主题时会自动适配，不用硬编码数值
    marginTop: theme.siteVariables.spaceVariables.m,
    // 直接给Flex的内置内容插槽加文字颜色，不需要额外给子元素包一层标签写样式
    content: {
      color: theme.siteVariables.colorScheme.brand.foreground
    }
  })}
>
  适配主题的内容
</Flex>

使用建议 #

• 如果只是给根元素加临时的、不需要跟随主题/组件状态变化的固定样式，两个属性都可以用
• 如果需要适配主题、根据组件状态动态调整样式、或者修改组件内部插槽的默认样式，必须用styles属性
• 注意style作为原生内联样式，CSS优先级高于styles传入的样式，如果两者同时写了同名规则，style的配置会覆盖styles的对应规则

内容的提问来源于stack exchange，提问作者DevÁsith