Logo

菜单

发布于 2026-01-06 0 阅读
0

React 组件样式：styled-components + twin.macro（Tailwind CSS 2.0）DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

React 组件样式：styled-components + twin.macro（Tailwind CSS 2.0）

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

有很多方法可以为 React 组件设置样式。但有两种方法在 React 开发者中非常流行。

一种方法是使用实​​用性优先的 CSS 框架Tailwind CSS，另一种方法是使用 CSS-in-JS 库，styled-components以 JS 方式为 React 组件设置样式。

但如果我们把它们结合起来，创造出一种强大的组件样式管理方式呢？🤔

有趣的

很有意思，对吧？🤩

所以，在本教程中，我们将看到如何同时使用它们来更高效地设置 React 组件的样式。

开始之前……💭

Tailwind是一个实用性优先的 CSS 框架，用于直接在标记语言中快速构建自定义设计。它有助于使用一组有限的基本实用工具来构建复杂的组件。

twin.macro是一个库，它有助于将 Tailwind CSS 与诸如 和 之类的库结合起来emotion，styled-components从而为 React 组件赋予更强大的样式控制能力。

所以，如果您正在使用styled-componentsReact 并希望增强其样式，Tailwind CSS或者您是 React 初学者并想学习一些神奇的样式设置方法，那么这篇文章就是为您准备的。

注意： 本文基于Tailwind CSS 2.0版本，可能不适用于其他版本的 Tailwind CSS。

我们将建造什么？🤔

本文将演示如何结合使用 `style`twin.macro和 ` styled-componentsstyle` 来为 React 组件添加样式。学习之后，您肯定能够更高效地为 React 组件设置样式。

先决条件📝

  • 具备 React JS 的基础知识。
  • 具备CSS基础知识。
  • Node 版本v14.15.1和 npm 版本6.14.8。在较低版本的 Node 上可能无法正常工作。

如果你有这些，我们就可以开始了🚀

让我们开始吧

开始吧🏁

1. 设置我们的项目

步骤一：创建我们的应用程序

首先，让我们运行以下命令来创建项目create-react-app：

npx create-react-app react-styling-tutorial
Enter fullscreen mode Exit fullscreen mode

项目创建完成后，让我们在 VS Code（或其他任何代码编辑器/IDE）中打开我们的项目。

步骤二：安装所需依赖项

现在，让我们运行以下命令twin.macro，在项目中安装tailwindcss和：styled-components

npm i --save twin.macro tailwindcss styled-components
Enter fullscreen mode Exit fullscreen mode

以下是我的所有依赖项及其版本：

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"tailwindcss": "^2.0.1",
"twin.macro": "^2.0.6",
Enter fullscreen mode Exit fullscreen mode

注意：请确保依赖项版本一致，以避免出现错误。

步骤 3：配置 Tailwind

安装完上述所有依赖项后，让我们运行以下命令，在目录中创建名为`.tailwind.config` 的 Tailwind 配置文件：tailwind.config.jssrc

npx tailwind init src/tailwind.config.js
Enter fullscreen mode Exit fullscreen mode

生成的文件如下所示：

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

如您所见，配置文件为“空”，因为没有任何配置。如果您需要完整的 Tailwind 配置，可以运行以下命令：

npx tailwind init src/tailwind.config.js --full
Enter fullscreen mode Exit fullscreen mode

步骤 4：配置双胞胎

现在让我们转到我们的配置package.json并添加以下twin配置：

"babelMacros": {
    "twin": {
        "config": "./src/tailwind.config.js",
        "preset": "styled-components"
    }
},
Enter fullscreen mode Exit fullscreen mode

此配置有助于将 Tailwind 类转换为 CSS-in-JS 代码。

太好了！让我们运行一下应用程序，确保一切正常：

npm start
Enter fullscreen mode Exit fullscreen mode

以下是我们的应用程序在浏览器（或类似浏览器）中的显示效果。
应用运行成功

成功

2. 创建组件

好的。我们先停止我们的网络服务器。

现在从目录中删除逗号App.css，以便稍微清理一下我们的项目。logo.svgsrc

src目录结构如下：

.
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js
Enter fullscreen mode Exit fullscreen mode

现在我们App.js按如下方式修改：

import React from 'react';

const App = () => {
    return <h1>My App Component</h1>;
};

export default App;
Enter fullscreen mode Exit fullscreen mode

现在如果你再次运行该应用，它将完全正常运行，不会出现任何错误😎

应用程序组件

运行正常

components很好。接下来，在目录内创建一个目录，并命名为“目录名src”。

然后，在该components目录下创建另一个名为 . 的目录Button。
现在，在该Button目录中创建一个index.js文件。

src目录结构如下：

.
|____components
| |____Button
| | |____index.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js
Enter fullscreen mode Exit fullscreen mode

接下来，src/components/Button/index.js让我们在button组件内部编写如下代码：

import React from 'react';

const ButtonComponent = () => {
    return <button>Click Me!</button>;
};

export default ButtonComponent;
Enter fullscreen mode Exit fullscreen mode

现在，让我们回到src/App.js导入我们的文件。ButtonComponent

import React from 'react';
import ButtonComponent from './components/Button'; // new

const App = () => {
    return (
        // new
        <div> 
            <ButtonComponent />
        </div>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

这就是我们的应用在浏览器中的样子。

显示按钮组件

您可以看到我们的按钮组件在这里🤩

伟大的

3. 设置主题

好的，目前为止一切顺利。现在让我们来设置项目的主题。

让我们停止服务器，然后转到/src/index.css页面顶部并添加以下 CSS 代码：

:root {
    --color-primary: #4ff0c9;
    --color-secondary: #172a45;
    --color-white-alt: #ccd6f6;
}
Enter fullscreen mode Exit fullscreen mode

这里我们创建了 3 个变量来存储颜色，分别命名为--color-primary、--color-secondary和--color-white-alt。

theme现在像下面这样在里面添加颜色/src/tailwind.config.js：

module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        extend: {
            colors: { // new
                primary: 'var(--color-primary)', // new
                secondary: 'var(--color-secondary)', // new
                whiteAlt: 'var(--color-white-alt)', // new
            }, // new
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

太好了！！！我们先运行一下应用程序，检查一下一切是否正常。

显示按钮组件

我们得到了和之前一样的结果🤟

4. 样式组件

让我们styles在当前目录下创建一个目录，并在该目录下src创建一个名为 `style` 的文件，用于设置组件的样式。StyledApp.jsstylesApp

最终，我们的src目录结构将如下所示：

.
|____components
| |____Button
| | |____index.js
|____styles
| |____StyledApp.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js
Enter fullscreen mode Exit fullscreen mode

现在，打开它StyledApp.js，让我们为App组件编写一些样式。

import tw, { styled } from 'twin.macro';

export const StyledApp = styled.div`
    ${tw`flex justify-center items-center h-screen`}
`;
Enter fullscreen mode Exit fullscreen mode

接下来，返回App.js并按StyledApp如下方式导入我们的代码：

import React from 'react';
import ButtonComponent from './components/Button';
import { StyledApp } from './styles/StyledApp'; // new

const App = () => {
    return (
        <StyledApp> {/* new */}
            <ButtonComponent />
        </StyledApp>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

现在保存并查看您的浏览器，按钮会出现在屏幕中央。

StyledApp

锵锵！！！正如你所见，我们App组件的样式设置完美无瑕😎

哇

我们也可以GlobalStyles在App组件中使用如下方法：

import React from 'react';
import ButtonComponent from './components/Button';
import { GlobalStyles } from 'twin.macro'; // new
import { StyledApp } from './styles/StyledApp';

const App = () => {
    return (
        <div>
            <GlobalStyles /> {/* new */}
            <StyledApp>
                <ButtonComponent />
            </StyledApp>
        </div>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

现在我们的应用界面将如下所示：

全局样式已应用

您可以看到，由于以下原因，我们的按钮组件的样式发生了变化GlobalStyles。

哇

太棒了！现在让我们来设置样式。在内部ButtonComponent创建另一个名为 . 的文件。StyledButton.js/src/styles

src/styles目录结构如下：

.
|____StyledApp.js
|____StyledButton.js
Enter fullscreen mode Exit fullscreen mode

StyledButton.js在我们的按钮组件内部编写一些样式。

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary`}
`;
Enter fullscreen mode Exit fullscreen mode

接下来，返回/src/components/Button/index.js并按StyledButton如下方式导入我们的文件：

import React from 'react';
import { StyledButton } from '../../styles/StyledButton'; // new

const ButtonComponent = () => {
    return <StyledButton>Click Me!</StyledButton>; // new
};

export default ButtonComponent;
Enter fullscreen mode Exit fullscreen mode

现在您可以在浏览器中看到我们设计的按钮样式了。

样式按钮

在职的

如果您想在此处添加自定义 CSS，ButtonComponent可以按如下方式操作/src/styles/StyledButton.js：

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: yellow;
    }

    &:hover {
        font-size: 2rem;
    }
`;
Enter fullscreen mode Exit fullscreen mode

定制风格

我们也可以theme像下面这样直接访问数据：

import tw, { styled, theme } from 'twin.macro'; // new

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: ${theme`colors.whiteAlt`}; // modified
    }

    &:hover {
        font-size: 2rem;
    }
`;
Enter fullscreen mode Exit fullscreen mode

现在可以看到按钮的背景颜色已经改变了。

主题数据

4. 条件样式

让我们通过条件来改变样式。

为此，让我们StyledButton.js按如下方式更改我们的代码：

import tw, { styled, theme, css } from 'twin.macro'; // modified

export const StyledButton = styled.button(() => [
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,
]);
Enter fullscreen mode Exit fullscreen mode

它会给我们带来和以前一样的结果🤟

好的。我们来添加一个条件。
如果条件为真，我们将更改按钮的样式isSecondary。

以下是我们最终的代码：

import tw, { styled, theme, css } from 'twin.macro';

export const StyledButton = styled.button(({ isSecondary }) => [
    // updated
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,

    isSecondary && tw`border-secondary hover:bg-secondary hover:text-white`, // new
]);
Enter fullscreen mode Exit fullscreen mode

现在让我们回到ButtonComponent`in`函数src/components/Button/index.js，并像下面这样传递isSecondary参数StyledButton：

const ButtonComponent = () => {
    return <StyledButton isSecondary>Click Me!</StyledButton>; // modified
};

export default ButtonComponent;
Enter fullscreen mode Exit fullscreen mode

条件组件

哇哦，太棒了！是不是？😎

结论📋

这是我的 GitHub 仓库，供您参考 - https://github.com/devsmranjan/react-tailwindcss-styledcomponents-template

你可以将此作为下一个项目的模板🙂

感谢阅读我的文章🙂。希望您能从中有所收获。

祝您编程愉快👨‍💻👩‍💻，敬请期待我的下一篇文章。

谢谢！别忘了点赞♥️并关注哦 :)

文章来源：https://dev.to/devsmranjan/styling-react-components-styled-components-twin-macro-tailwind-css-2-0-3cnk
dev.to 仓库概览：功能、错误...
10 years as a pro...