使用styled-components尝试使用theme Provider

2 年 ago

科, 雅

2 minutes

开发环境

“react”: “^18.2.0”,
“typescript”: “^4.9.5”

“react”: “^18.2.0”,
“typescript”: “^4.9.5” 库版本

我为什么想要写这篇文章呢？

尽管关于使用styled-components的Theme-Provider的资料很多，但我还是觉得对于初学者来说，没有太多可以一眼就上手的资料。因此，为了备忘并方便使用，我准备了一份可以立即使用的模板资料。

我一直以为Theme-Provider就是全局CSS，但后来才发现我错了。在写作过程中得知了这个。

Theme-Provider是一种工具，用于为React组件树中的所有带有样式的组件提供主题。

关于全局CSS，我们将在资料项目的最后作为补充进行说明。

首先使用npm命令进行styled-components的安装。

npm install styled-components @types/styled-components

因为这里大部分的人都已经理解了，所以我就不需要特别解释了。

在src目录下创建一个名为theme的文件夹。

我正在使用create-react-app结构来创建。
在src文件夹下创建一个theme目录，并在theme目录下创建theme.ts文件。

src
 -theme
  -theme.ts

可以。

theme.ts的示例代码

export const theme = {
  color: {
    mainColor: "red",
    subColor: "blue,
  },
}

这是theme.ts的示例代码，已经完成了。根据需要，我们可以在theme内添加属性。
根据实际需求，添加必要的属性就可以了。这次的目标是先尝试一下，所以只包含了最基本的颜色。

编辑index.tsx文件

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme/theme";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
        <App />
    </ThemeProvider>
  </React.StrictMode>
);

通过import theme.ts文件的内容，并将其作为Props传递给ThemeProvider，可以将theme信息应用于组件的所有下层（包括App以下）的带有样式的组件。

尝试将实际的组件进行描述

import React, { FC } from "react";
import styled from "styled-components";

type Props = {
  children: React.ReactNode;
};

type ButtonProps = React.ComponentPropsWithoutRef<"button">;

const Button: FC<Props & ButtonProps> = ({ children, ...other }) => {
  return <SButton {...other}>{children}</SButton>;
};

export default Button;

const SButton = styled.button`
  color: ${({ theme }) => theme.color.mainColor};
  background-color: ${({ theme }) => theme.color.subColor};
`;

我已经准备好一个按钮组件，能够接收”chileren”作为”Props”。

※这里写了ComponentPropsWithoutRef，虽然这在当前文档中不是重要的内容，但为了补充，我会写下来。
⚪︎提取HTML按钮元素的属性：<“button”>指的是HTML元素。这段代码获取了标准的HTML按钮元素具有的所有属性（例如onClick，disabled等）的类型。
⚪︎排除ref属性：ComponentPropsWithoutRef排除了ref属性。这是因为ref在处理上有特殊的规定，所以通常以不同的方式处理常规属性。
⚪︎简单来说，就是让我们能够使用按钮常用的onClick和disabled等标准属性。

调用和结果，由我创建的按钮组件生成。

import React, { FC } from "react";
import Button from "../../01atoms/Button";


const TopLayout: FC = () => {
  return (
    <>
      <Button>完成したボタンがこちら</Button>
    </>
  );
};

export default TopLayout;

对这个问题的所思所感

虽然按钮的外观看起来有点不太好，但我认为使用themeProvider可以理解其使用方式。如何管理Provider的内容将是一个未来的问题。

補充

顺便问一下，什么是全局CSS呢？
作为结果，我认为它指的是像App.tsx这样加载的CSS（可能是style.css之类的）。
在styled-components中，似乎有一个名为createGlobalStyle的功能，但是因为代码会变得稍微长一些，所以我不太喜欢它。

在 App.tsx 文件中，import src 目录下的 style.css 文件。

import React from "react";
import "reset.css";
import "./style.css";
import ReactRouter from "./compornents/05pages/ReactRouter";

function App() {
  return (
    <div className="App">
      <ReactRouter />
    </div>
  );
}

export default App;

在我创建的src文件夹中的style.css文件中，主要使用box-sizing和按钮悬停时的变化时间等。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

body {
  background-color: lemonchiffon;
}

button {
  &:hover {
    transition: all 0.8s;
  }
}

谢谢您的浏览。