Pico CSS 语义根元素未应用于 forms/_basics.scss 中的输入、选择、文本区域

Question

我将 Pico CSS 安装到了我的 HTML 项目的 npm 工作区中。

npm i -D @picocss/pico

• 我的套餐版本是这样的

“@picocss/pico”：“^2.0.6”，

• 接下来，我有一个 sass 文件，用于在我的项目中启动 pico 样式

@use "../../node_modules/@picocss/pico/scss/index" with (
    $enable-semantic-container: true,
    $semantic-root-element: "#nffaac",
    $enable-classes: true,
    $modules: (
        "themes/default": true,
        "content/code": false,
        "forms/input-color": false,
        "forms/input-date": false,
        "forms/input-file": false,
        "forms/input-range": false,
        "forms/input-search": false,
        "components/accordion": false,
        "components/card": false,
        "components/dropdown": false,
        "components/loading": false,
        "components/modal": false,
        "components/nav": false,
        "components/progress": false,
        "components/tooltip": true,
        "utilities/accessibility": false,
        "utilities/reduce-motion": false));

• 正如您在上面看到的，我正在使用 semantic-root-element。在我的 HTML 项目中，当它构建并显示在浏览器中时，DOM 会加载我的自定义表单...

• 正如您在上面所看到的，输入元素上所有漂亮的样式都是通过 Pico CSS 从 _basics.scss 文件应用的

    input, select, textarea {....}

• 但我希望它看起来像这样......

#nffaac input, #nffaac select, #nffaac textarea {....}

为了将父元素应用到 Pico CSS _basics.scss 选择器上，我缺少什么？

Answer 1

以防万一有人遇到这个挑战并且只是想要一个围绕 pico 样式的父选择器，以下关于 条件样式 的资源帮助了我。

将该变量添加到我的 pico css 设置中现在会在 DOM 中显示我的父 ID。

// Pico lightweight version
@use "../../node_modules/@picocss/pico/scss/index" with (
    $enable-semantic-container: true,
    $semantic-root-element: "#nffaac", 
    $parent-selector: "#nffaac", //this is making all the difference
    $enable-classes: true,
    $modules: (
        "themes/default": true,
        "content/code": false,
        "forms/input-color": false,
        "forms/input-date": false,
        "forms/input-file": false,
        "forms/input-range": false,
        "forms/input-search": false,
        "components/accordion": false,
        "components/card": false,
        "components/dropdown": false,
        "components/loading": false,
        "components/modal": false,
        "components/nav": false,
        "components/progress": false,
        "components/tooltip": true,
        "utilities/accessibility": false,
        "utilities/reduce-motion": false));

我现在看到以下内容已加载...

#nffaac input, #nffaac select, #nffaac textarea {....}