在styled-components中如何将单个元素的CSS拆分为多个函数/变量？

这个方案完全可行，styled-components原生支持在样式模板字符串中插入独立的样式片段，你想要的写法可以直接实现。

实现步骤 #

1. 首先从styled-components中导入css工具函数，用来包裹独立的样式片段，可以获得语法高亮支持，同时兼容静态和动态样式场景：

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

2. 按你要的分类拆分样式即可，原有选择器的写法不需要做任何修改，&仍然会指向最终的StyledTable根组件：

// 表格行相关样式
const rowsCss = css`
  & tbody .ant-table-column-sort,
  & thead th.ant-table-column-sort {
    background-color: unset;
  }
  /* 其余所有行相关样式都可以放在这里 */
`;

// 表格列相关样式
const columnsCss = css`
  /* 把你原来归类为列样式的代码放在这里 */
`;

// 控件相关样式
const controlsCss = css`
  & .ant-select .ant-select-selector {
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    color: lightgray;
    height: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  & .ant-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  & .ant-pagination .ant-pagination-total-text {
    color: rgba(102, 220, 141, 1);
  }
  /* 其余所有控件相关样式都可以放在这里 */
`;

3. 直接按你期望的方式引用即可，原有样式效果不会有任何变化：

export const StyledTable = styled((props) => <Table {...props} />)`
  padding: 20px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  
  ${rowsCss}
  ${columnsCss}
  ${controlsCss}
`

动态样式扩展 #

如果后续你需要让拆分的样式支持根据组件props动态生成，只需要把样式变量改成返回css片段的函数即可，styled-components会自动把组件props注入函数中，不需要修改引用方式：

// 示例：根据组件传入的size参数动态调整圆角
const controlsCss = (props) => css`
  & .ant-select .ant-select-selector {
    border-radius: ${props.size === 'small' ? '6px' : '10px'};
    // 其余样式不变
  }
`

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