无法从自定义CSS属性设置边框样式

Question

我有一个简单的反应应用程序 （Vite项目）

app.tsx

import "./common-styles.css";

export default function App() {
  return (
    <div className="app">
      <div className="interactive">
        content content
      </div>
    </div>
  )
}

只有 1 个 css 文件

常见样式.css

@property --interactive-color {
    syntax: "<color>";
    inherits: true;
    initial-value: green;
}
@property --interactive-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}
@property --interactive-border-top-style {
    syntax: "<string>";
    inherits: true;
    initial-value: dotted;
}
@property --interactive-border-top-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 5px;
}
@property --interactive-border-top-color {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
}

.interactive {
    background-color: var(--interactive-color);
    color: var(--interactive-text-color);

    border-top-style: var(--interactive-border-top-style);
    border-top-width: var(--interactive-border-top-width);
    border-top-color: var(--interactive-border-top-color);  

    padding-top: var(--interactive-padding-top, 1vw);
    padding-bottom: var(--interactive-padding-bottom, 1vw);
    padding-right: var(--interactive-padding-right, 3vw);
    padding-left: var(--interactive-padding-left, 3vw);
    border-top-right-radius: var(--interactive-border-top-right-radius, 5px);
    border-top-left-radius: var(--interactive-border-top-left-radius, 5px);
    border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px);
    border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px);
}

（移除底部、右侧和左侧道具以缩短问题，但它们的行为相同）

由于我没有覆盖任何属性，因此我希望组件具有所有属性的指定初始值。
确实如此，但边框样式除外，其行为就像具有未指定的值一样。

我知道通过手动指定样式可以正确设置边框宽度和颜色

border-top-style: solid;

颜色道具也设置正确。

这只是自定义道具中不起作用的样式。

我已经尝试过：

syntax: "<String>";

syntax: "<string>";

initial-value: "dotted";

initial-value: dotted;

syntax: "'none' | 'solid' | 'dotted' | 'dashed'";

在 prop 引用上指定后备值：

border-top-style: var(--interactive-border-top-style, dashed);

使其采用后备值。

Answer 1

您必须像下面一样定义值，而不使用引号。

@property --border-top-style {
    syntax: "dotted|dashed|solid";
    inherits: true;
    initial-value: solid;
}
@property --border-top-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 5px;
}
@property --border-top-color {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
}

body {
  border: var(--border-top-width) var(--border-top-style) var(--border-top-color);
}

some content