设计系统:使用TailwindCSS覆盖样式

Question

我正在尝试使用ReactJS和TailwindCSS创建一个设计系统。

我创建了一个具有基本样式的默认Button组件，如下所示：

import React from "react";
import classNames from "classnames";

const Button = React.forwardRef(
  ({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames(
      className,
      "w-24 py-3 bg-red-500 text-white font-bold rounded-full"
    );

    const commonProps = {
      className: buttonClasses,
      onClick,
      ref
    };

    return React.createElement(
      "button",
      { ...commonProps, type: "button" },
      children
    );
  }
);

export default Button;

然后在我的页面中使用Button，如：

import Button from "../src/components/Button";

export default function IndexPage() {
  return (
    <div>
      <Button onClick={() => console.log("TODO")}>Vanilla Button</Button>
      <div className="h-2" />
      <Button
        className="w-6 py-2 bg-blue-500 rounded-sm"
        onClick={() => console.log("TODO")}
      >
        Custom Button
      </Button>
    </div>
  );
}

以下是显示的内容：

​

​

有些属性像background-color一样被覆盖，但是有些属性没有被覆盖(其余的属性)。

原因是TailwindCSS提供的类是按照bg-blue-500放在bg-red-500之后的顺序编写的，因此重写了它。另一方面，自定义按钮中提供的其他类是在基按钮上的类之前编写的，因此不会覆盖样式。

这种行为是在TailwindCSS中发生的，但在类顺序能够产生此场景的范围内，任何其他样式方法都可能发生这种行为。

您有任何解决办法/解决方案来启用这种自定义吗？

这是一个完整的CodeSanbox，如果需要的话。

Answer 1

一种方法是在您的提取类层中使用Tailwind的@apply从您的组件中提取components。

/* main.css */

@layer components {
    .base-button {
        @apply w-24 py-3 bg-red-500 text-white font-bold rounded-full;
    }
}

// Button.js

const Button = React.forwardRef(({ children, className = "", onClick }, ref) => {
    const buttonClasses = classNames("base-button", className);

    // ...
);

这将将样式提取到新的base-button类中，这意味着它们很容易被传递给Button组件的实用程序类覆盖。

Answer 2

另一种使用尾风创建可重用反应组件的方法如下所示。

读一下这个要点

https://gist.github.com/RobinMalfait/490a0560a7cfde985d435ad93f8094c5

作为一个很好的例子。

避免使用className作为支柱。否则，您将很难知道组件处于什么状态。如果您想要添加一个额外的类，您可以轻松地扩展。

您需要一个有条件地组合类名字符串的助手。罗伯特，这一要旨的作者，也与我们分享了帮助者的功能：

export function classNames(...classes: (false | null | undefined | string)[]) {
  return classes.filter(Boolean).join(" ");
}

Answer 3

为了解决这个问题，我建议做Bootstrap所做的事情。默认按钮使用默认类，如下所示：

.button {
  width: 2rem;
  background-color: red;
  border-radius: 0.25rem;
}

然后，在自定义按钮时，您应该应用类，这些类要么位于CSS文件中按钮类之后，要么出现在默认CSS文件之后调用的另一个CSS文件中，或者使用!important声明。

旧答案使用浏览器开发工具来观察浏览器如何在元素上加载CSS样式。例如，在Chrome中，右击自定义按钮并选择“检查”。一个DevTools窗口将打开，元素将在DOM中高亮显示。

在右边，您应该有一个样式窗格。在那里，您将看到应用于元素的所有CSS样式的列表。带有删除的样式被其他CSS类或内联样式调用的样式覆盖。

在您的示例中，自定义按钮既有"CommonProps“类，也有要在IndexPage中添加的类。例如，类w-6和类w-24。

由于CSS优先级，类w-24是重写类w-6的。在这里阅读有关CSS优先级的更多信息。查看接受答案中的第3条规则。我想你就是这样的。

要解决这个问题，您可能需要从commonProps中删除一些类。或者在某些类上使用!important声明。这是您设计系统的一部分，您需要仔细考虑。看看其他系统如Bootstrap是如何做到这一点的。