在Gatsby中使用样式化组件

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

这篇文章假设你已经有一个可以编辑的 Gatsby.js 项目。（如果您需要这方面的帮助，请按照您使用 Gatsby v2 的第一步中的步骤操作，然后返回此处。）

安装

将 styled-components 安装到我们的 Gatsby 项目中是一个非常简单的两步过程。

1. 安装所需的依赖项：

第一步，我们只需要从 npm 安装三个（必需的）依赖项：

styled-components：主要的 styled-components 框架，它是为 React 构建的极其优雅和灵活的 CSS-in-JS 解决方案。它会自动处理 SSR、自动前缀等等。（在此处查看他们出色的文档：styled-components docs）
gatsby-plugin-styled-components：用于样式化组件的官方 Gatsby.js 插件。
babel-plugin-styled-components：这是一个 Babel 插件，提供更清晰的类名、服务器端渲染能力、更小的包大小等。（盖茨比依赖于此，但我们不必对 .babelrc 文件进行任何手动编辑。）

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

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

注意：可以使用 npm 安装这些，如果您更喜欢使用它！

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

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

盖茨比-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Change plugin default options here, e.g.:
        // ssr: false
        // displayName: false, 
        // minify: false
      },
    },
    //... other plugins
  ]
}

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

如果您不打算自定义插件选项（我很少这样做），那么更快的单行方法也可以：

盖茨比-config.js

module.exports = {
  ...
  plugins: [
    `gatsby-plugin-styled-components`,
     //... other plugins
  ]
}

就这样！ styled-components 现在已安装并可以在我们的 Gatsby 项目中使用。

用法

这篇文章并不打算成为使用样式组件的详细课程，因为那将是一篇很长的文章！但是，让我们创建一些快速示例来演示在我们的 Gatsby 项目中的用法。

创建一个新页面

为了让事情尽可能简单，让我们首先在 /src/pages/sc-demo.js 创建一个基本的“演示”页面。

/src/pages/sc-demo.js

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import Layout from '../components/layout';

class SCDemoPage extends React.Component {
  render() {
    const siteData = this.props.data.site.siteMetadata;
    const siteTitle = siteData.title;
    const siteDescription = siteData.description;

    return (
      <Layout location={this.props.location}>
        <Helmet
          htmlAttributes={{ lang: 'en' }}
          meta={[{ 
            name: 'description', 
            content: siteDescription 
          }]}
          title={siteTitle}
        />

        <section>
          <h2>Styled Components Demo</h2>

          <div>
            <h3>Banana Milkshakes</h3>
            <p>We'll definitely need frozen bananas 
            and some milk.</p>

            <Link to='/'>To Homepage</Link>
          </div>
        </section>
      </Layout>
    )
  }
};

export default SCDemoPage;

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`;

导入和使用样式组件

我们只是要为我们的“香蕉奶昔”div 添加一些简单的样式。首先，让我们在页面顶部导入 styled-components，就在 Helmet 导入行之后：

import React from 'react';
import { Link, graphql } from 'gatsby';
import Helmet from 'react-helmet';

import styled from "styled-components"; // 💅 yay!

然后，就在 Layout 导入行下方，让我们创建两个样式组件。对于第一个，CustomBox，我们将创建一个将样式应用于 HTML div 元素的组件。（注意类似 SASS 的嵌套。）

const CustomBox = styled.div`
  border: 1px solid rgb(0, 143, 104);
  padding: 20px;

  h3 {
    color: rgb(109, 182, 91);
    margin: 0 0 10px;
    padding: 0;
  }
`

对于第二个，我们将样式应用到 Gatsby 的 Link 组件。这是为了证明您几乎可以设置任何组件的样式，而不仅仅是 HTML 元素！（例如，我用它来调整 react-bootstrap 组件。）

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

Important: Note the use of [template literal strings](js-template-literals-es6) in both items above! （这些是反引号，而不是单引号。）

使用页面内的新组件

现在我们可以使用这些了！首先，让我们将 Banana Milkshakes 信息周围的普通 div 标签替换为新的 CustomBox 标签。然后，将 Link 标签替换为 StyledLink 标签。

结果如下：

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

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

结论

将 styled-components 添加到您的 Gatsby.js 项目并不困难，并且可以成为真正的游戏规则改变者。这个演示几乎没有触及表面，所以我鼓励您深入研究样式的组件文档，看看它可以做的所有惊人的事情！