在styled-components中共享样式的惯用方法？JSS迁移场景问询

针对你从JSS迁移到styled-components的场景，这里有几种非常常用的实现多组件共享同一样式的方法，完全对应你原来的JSS用法：

1. 使用css辅助函数定义可复用样式片段 #

这是最灵活的方式，适合需要在多个不同组件中复用同一段样式的场景：

import styled, { css } from 'styled-components';

// 定义共享的样式片段，语法和普通styled组件里的CSS一致
const sharedMyStyles = css`
  color: green;
  // 后续可以添加更多共享样式，比如padding、font-size等
`;

// 给现有Widget1组件包裹一层样式
const StyledWidget1 = styled(Widget1)`
  ${sharedMyStyles}
`;

// 给Widget2做同样的处理
const StyledWidget2 = styled(Widget2)`
  ${sharedMyStyles}
`;

export default function(props) {
  return (
    <div>
      <StyledWidget1 />
      <StyledWidget2 />
    </div>
  )
}

这种方式的好处是，你可以随时扩展sharedMyStyles的内容，所有引用它的组件都会自动应用更新后的样式，和你原来JSS里维护styles.myStyles的逻辑完全对应。

2. 创建基础样式组件，直接复用 #

如果你的多个组件都是原生HTML元素（比如div、span），或者你希望有一个通用的"样式载体"组件，可以直接创建一个基础样式组件，然后用它来包裹或者替代原有组件：

import styled from 'styled-components';

// 创建一个带有共享样式的基础组件
const BaseStyledElement = styled.div`
  color: green;
`;

// 使用as属性将基础组件渲染为目标Widget
export default function(props) {
  return (
    <div>
      <BaseStyledElement as={Widget1} />
      <BaseStyledElement as={Widget2} />
    </div>
  )
}

这里的as属性是styled-components的实用特性，它允许你把一个样式化组件渲染成另一个组件/元素，完美实现"同一样式，不同组件"的需求。

3. 动态传递共享样式（适合临时场景） #

如果只是偶尔需要给不同组件添加共享样式，也可以通过className结合css函数生成的样式来实现，不过这种方式不如前两种常用：

import { css } from 'styled-components';

const sharedMyStyles = css`
  color: green;
`;

export default function(props) {
  return (
    <div>
      <Widget1 className={sharedMyStyles} />
      <Widget2 className={sharedMyStyles} />
    </div>
  )
}

不过要注意，这种方式需要你的自定义Widget组件正确传递className属性到它内部的根元素上，否则样式不会生效。

内容的提问来源于stack exchange，提问作者tony_k