在创建新的Gatsby.js项目时，有几个可用于设置样式的选项。我们可以编写自己的css/scss样式表，安装像Bootstrap这样的框架，和/或使用各种css-in-JS solutions.styled-components是最流行的css-in-jss解决方案之一，这是有充分理由的。它功能强大，易于学习，并且与盖茨比完美地配合使用。让我们来探索如何将其添加到您的项目中！

本文假设您已经有了一个可以编辑的Gatsby.js项目。(如果您需要帮助，请按照您使用盖茨比v2的第一步]中的步骤操作，然后返回此处。)

安装

将样式组件安装到我们的Gatsby项目中是一个非常简单的两步过程。

1.安装所需的依赖项：

对于第一步，我们只需要从NPM安装三个(必需的)依赖项：

Style-Components：主要的Style-Components框架，这是为Reaction构建的一个非常优雅和灵活的css-in-JS解决方案。它可以自动处理SSR、自动添加前缀等功能。(请在此处查看他们的精彩文档：Style-Components docs)
Gatsby-Plugin-Style-Components：用于样式化组件的官方Gatsby.js插件。
Babel-Plugin-Style-Components：这是一个用于Babel的插件，提供更清晰的类名、服务器端渲染能力、更小的包大小等。(Gatsby依赖于此，但我们不需要对.Babelrc文件进行任何手动编辑。)

让我们导航到我们的项目根目录，并从命令提示符运行以下命令：

1$ yarn add styled-components gatsby-plugin-styled-components babel-plugin-styled-components

<$>[注意]注意：如果您愿意使用NPM安装这些程序也可以！

2.将插件添加到您的Gatsby配置中：

对于第二步/最后一步，我们将插件添加到我们的Gatsby配置中。在我们项目的gatsby-config.js文件中，我们将其添加到plugins数组中。

 1[label gatsby-config.js]
 2module.exports = {
 3  ...
 4  plugins: [
 5    {
 6      resolve: `gatsby-plugin-styled-components`,
 7      options: {
 8        // Change plugin default options here, e.g.:
 9        // ssr: false
10        // displayName: false, 
11        // minify: false
12      },
13    },
14    //... other plugins
15  ]
16}

有几个选项可用于覆盖默认设置，例如禁用缩小或服务器端渲染。这些的完整列表和描述可以在样式化组件文档中找到here。

如果您不打算定制插件选项(我很少这样做)，那么更快的单行方法也是可行的：

1[label gatsby-config.js]
2module.exports = {
3  ...
4  plugins: [
5    `gatsby-plugin-styled-components`,
6     //... other plugins
7  ]
8}

就这样!样式化的组件现在已经安装好，可以在我们的Gatsby项目中使用了。

使用方法

这篇文章并不是关于使用样式组件的详细教训，因为这本身就是一篇很长的文章！但是，让我们创建几个快速示例来演示在我们的Gatsby项目中的用法。

新建页面

为了尽可能简单，让我们首先在/src/ages/sc-demo.js中创建一个基本的‘demo’页面。

 1[label /src/pages/sc-demo.js]
 2import React from 'react';
 3import { Link, graphql } from 'gatsby';
 4import Helmet from 'react-helmet';
 5
 6import Layout from '../components/layout';
 7
 8class SCDemoPage extends React.Component {
 9  render() {
10    const siteData = this.props.data.site.siteMetadata;
11    const siteTitle = siteData.title;
12    const siteDescription = siteData.description;
13
14    return (
15      <Layout location={this.props.location}>
16        <Helmet
17          htmlAttributes={{ lang: 'en' }}
18          meta={[{ 
19            name: 'description', 
20            content: siteDescription 
21          }]}
22          title={siteTitle}
23        />
24
25        <section>
26          <h2>Styled Components Demo</h2>
27
28          <div>
29            <h3>Banana Milkshakes</h3>
30            <p>We'll definitely need frozen bananas 
31            and some milk.</p>
32
33            <Link to='/'>To Homepage</Link>
34          </div>
35        </section>
36      </Layout>
37    )
38  }
39};
40
41export default SCDemoPage;
42
43export const pageQuery = graphql`
44  query {
45    site {
46      siteMetadata {
47        title
48        description
49      }
50    }
51  }
52`;

导入并使用styled-components

我们只是要为‘Banana Milkshakes’div添加一些简单的样式。首先，我们在页面顶部的Helmet导入行后面导入style-Components：

1import React from 'react';
2import { Link, graphql } from 'gatsby';
3import Helmet from 'react-helmet';
4
5import styled from "styled-components"; // 💅 yay!

然后，在Layout‘导入行下面，让我们创建两个样式组件。对于第一个元素CustomBox`，我们将创建一个组件，该组件将样式应用于一个HTMLdiv元素。(请注意这种类似sass的嵌套。)

 1const CustomBox = styled.div`
 2  border: 1px solid rgb(0, 143, 104);
 3  padding: 20px;
 4
 5  h3 {
 6    color: rgb(109, 182, 91);
 7    margin: 0 0 10px;
 8    padding: 0;
 9  }
10`

对于第二个，我们将样式应用到Gatsby的Linkcomponent.这是为了演示您可以设计几乎任何组件的样式，而不仅仅是HTML元素！(例如，我曾使用它来调整`act-bootstap‘组件。)

1const StyledLink = styled(Link)`
2  color: red;
3`

<$>[warning]重要提示：注意在以上两项中使用template literalsstrings！（这些是反引号，不是单引号。)<$>

使用页面内部的新组件

现在我们可以把这些东西投入使用了！首先，让我们将香蕉奶昔信息周围的普通div‘标签换成新的CustomBox标签。然后将Link标签替换为StyledLink`标签。

结果如下：

1<CustomBox>
2  <h3>Banana Milkshakes</h3>
3  <p>We'll definitely need frozen bananas 
4  and some milk.</p>
5  <StyledLink to="/">To Homepage</StyledLink>
6</CustomBox>

就这样!如果您的Gatsby站点在开发模式下运行，您将看到样式在保存后立即更新。

结论

将样式组件添加到您的Gatsby.js项目并不困难，并且可以真正改变游戏规则。这个演示仅仅触及了皮毛，所以我鼓励您深入研究样式组件documentation]，看看它能做的所有令人惊叹的事情！

在盖茨比中使用样式组件

安装