使用Styled-Components创建CSS规则：能否支持Glamor式内联方案？

当然支持啦！完全不用修改外部包，就能给它的元素加上 Styled-Components 的样式，下面给你两种最适配你场景的用法：

1. 直接用 css 工具函数（和 Glamor 用法几乎一致） #

首先从 Styled-Components 里导入 css，定义好你的样式规则，然后把它当作 className 传给外部组件就行——Styled-Components 会自动处理这个规则，生成对应的类名：

import { css } from 'styled-components';

// 用模板字符串写样式（更推荐，支持 CSS 语法高亮）
const customStyle = css`
  color: red;
  padding: 10px;
  background: #f5f5f5;
`;

// 或者用对象语法（和 Glamor 完全一样）
// const customStyle = css({
//   color: 'red',
//   padding: '10px',
//   background: '#f5f5f5'
// });

// 给外部组件传样式
function YourComponent() {
  return (
    <External className={customStyle}>
      你的内容
    </External>
  );
}

如果你的外部组件会把 props 直接传递给内部的根元素（比如你提到的 <div {...props}>），那这个方法完美适配，样式会直接作用在根元素上。

2. 用 styled() 包装外部组件 #

如果你想更“Styled-Components 风格”一点，可以直接把外部组件包装成一个 styled 组件，然后在模板里写样式：

import styled from 'styled-components';

// 包装外部组件，添加自定义样式
const StyledExternal = styled(External)`
  color: red;
  padding: 10px;
  background: #f5f5f5;
`;

// 使用包装后的组件
function YourComponent() {
  return <StyledExternal>你的内容</StyledExternal>;
}

这种方式更适合需要给外部组件加多种样式的场景，维护起来更方便。

两种方法都不需要修改外部包的代码，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Tzook Bar Noy