使用Fluent UI（Griffel）设置border:none时出现类型错误的问题咨询

在使用Griffel处理Fluent UI样式时，直接设置border: "none"会触发类型错误，核心原因是Griffel的类型系统对CSS复合属性做了严格约束，不支持border这类属性的字符串简写形式，必须用细粒度属性或对象结构定义。

解决方案 #

将border: "none"替换为以下两种写法之一：

方法1：使用细粒度属性borderStyle

import {makeStyles} from "@fluentui/react-components";
export const settingsButtonStyle = makeStyles({
    root: {
      borderStyle: "none", // 替换原border: "none"
      background: "#E5E5E5",
      marginRight: "13px"
    },
    rootHovered: {
      background: "#E5E5E5",
    }
});

方法2：使用border对象结构

import {makeStyles} from "@fluentui/react-components";
export const settingsButtonStyle = makeStyles({
    root: {
      border: { style: "none" }, // 用对象形式定义border
      background: "#E5E5E5",
      marginRight: "13px"
    },
    rootHovered: {
      background: "#E5E5E5",
    }
});

两种写法都符合Griffel的类型约束，可正常去除按钮边框且不会触发错误。

内容的提问来源于stack exchange，提问作者aryan singh