在React开发中，引入外部样式是提升应用美观性和可维护性的重要手段。本文将详细讲解在React中使用外部样式的三种常见方法，重点是css-in-js解决方案中的styled-components。
我们来了解一下**css-in-js**。这是一种使用JavaScript编写CSS样式的实践，它将样式直接与组件逻辑结合在一起。css-in-js的优势在于它提供了组件级别的样式隔离，避免了样式冲突，并且允许动态样式计算。目前，有很多css-in-js库可供选择，如styled-components、polished、glamorous、radium和emotion等，其中styled-components和emotion是最为成熟和广泛采用的。
**styled-components**是css-in-js领域的一个主流实现，也是组件化样式的首选方案。其特点包括：
1. **唯一class类名**：styled-components自动生成唯一的类名，避免了命名冲突和全局污染。
2. **无冗余css代码**：样式与组件紧密关联，只在组件被渲染时才加载相关的样式。
3. **动态样式**：允许根据组件状态或props动态调整样式，无需创建多个class。
4. **自动添加兼容前缀**：类似于Autoprefixer，styled-components会自动处理浏览器兼容性问题。
5. **支持变量和继承**：可以通过变量设定样式，并通过props传递变量来改变组件样式。
**使用styled-components的步骤**如下：
1. **安装**：使用npm或yarn安装依赖：`npm install styled-components`。
2. **导入并使用**：通过ES6的模板字符串调用styled-components的标签函数，如`styled.h1`来定义样式，然后在组件中正常使用。
3. **嵌套样式**：可以在样式定义中使用嵌套选择器，如在`styled.div`中使用`> h2`和`> .content`来指定子元素的样式。
4. **使用props传递参数**：可以通过props来动态调整组件样式，例如，可以创建一个Button组件，通过props.primary来改变按钮的样式。
例如，以下是一个使用styled-components的例子：
```jsx
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 5px;
color: palevioletred;
border: 2px solid palevioletred;
cursor: pointer;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`;
const App = () => (
<div>
<Button>普通按钮</Button>
<Button primary>主要按钮</Button>
</div>
);
export default App;
```
在这个例子中，Button组件接收一个`primary`prop，当此prop为true时，按钮将显示为主要颜色。
总结起来，React中使用外部样式的主要方法之一是利用css-in-js库，尤其是styled-components。它提供了一种简洁、灵活的方式来处理组件样式，使得样式与组件逻辑更加紧密地结合，同时解决了CSS模块化和全局样式冲突的问题。通过理解并熟练掌握styled-components的使用，开发者可以更高效地构建React应用。
