CSS 层

在样式化模式下使用 PrimeReact 级联层的最佳实践。

特异性#

CSS 层仅在样式化模式下使用，在非样式化模式下，不包含内置的 CSS 类，因此不定义层。本文档仅适用于样式化模式。

@layer 是一个标准的 CSS 功能，用于定义级联层以实现可自定义的优先级顺序。如果您需要更熟悉层，请访问 MDN 上的文档作为入门。在样式化模式下，PrimeReact 将内置样式类包装在 primereact 级联层下，以便轻松覆盖库样式。您应用程序中没有层的 CSS 具有最高的 CSS 特异性，因此无论位置如何，或者类的编写有多强，您都能够覆盖样式。

例如，假设您需要删除正在使用的主题定义的 InputSwitch 组件的圆角边框。为了实现这一点，需要覆盖 .p-inputswitch .p-inputswitch-slider 选择器。如果没有层，我们将不得不编写更强的 css 或使用 !important，但是，有了层，这不会出现问题，因为您的 CSS 始终可以使用更直接的类名（如 my-switch-slider）覆盖 PrimeReact。此方法的另一个优点是它不会强迫您找出组件的内置类名。


import React, { useState } from 'react';
import { InputSwitch } from 'primereact/inputswitch';

export function SpecificityDemo() {
    const [checked, setChecked] = useState(false);
    const css = `
        .my-switch-slider {
            border-radius: 0;
        }

        .my-switch-slider:before {
            border-radius: 0;
        }
    `;

    return (
        <div className="card">
            <InputSwitch
                checked={checked}
                onChange={(e) => setChecked(e.value)}
                pt={{
                    slider: {
                        className: 'my-switch-slider'
                    }
                }}
            />
            <style>{css}</style>
        </div>
    );
}
 

层还可以使用 CSS 模块，有关示例，请查看 CSS 模块 指南。

重置#

如果您在 HTML 元素（如输入和按钮）上具有全局样式，而这些元素也由 PrimeReact 使用，那么自定义的便利性可能会出现问题，因为具有更广泛范围的全局样式（例如 button ）且没有层的全局样式始终会覆盖 PrimeReact 组件，从而导致意外的结果。将全局样式应用于标准 HTML 元素的常见用例是 CSS 重置实用程序，以删除浏览器的默认样式。在这种情况下，最佳实践是将您的 CSS 包装在 reset 之类的层中，并确保 primereact 在您的层之后，因为定义在后的层具有更高的优先级。这样，您的重置 CSS 不会妨碍 PrimeReact 组件。


/* Order */
@layer reset, primereact;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}
 

库#

PrimeReact 和 CSS 库之间的兼容性。

Tailwind CSS#

Tailwind CSS 在名为 preflight 的基础中包含一个重置实用程序。如果您正在使用此功能，请将基础和实用程序包装在单独的层中，并确保 primereact 层在基础之后。 


@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}
 

Bootstrap#

Bootstrap 具有 reboot 实用程序来重置标准元素的 CSS。如果您要包含此实用程序，则可以在导入时为其指定一个层。


@layer bootstrap-reboot, primereact;

@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
 

Normalize#

Normalize 是另一个用于重置标准元素 CSS 的实用程序。导入 CSS 文件时，将其分配给一个层，并定义层顺序，使 primereact 在规范化层之后。


@layer normalize, primereact;

@import "normalize.css" layer(normalize-reset);
 
            PrimeReact 10.9.1 由 PrimeTek