fluent-ui - 如何在 Microsoft 的 mergeStyles() 实用程序中格式化“::before”伪类？

Question

我正在尝试使用微软的 mergeStyles 实用程序将我的 SCSS 代码移动到 React 组件中，该实用程序是其 FluentUI 框架的一部分。我一直在弄清楚如何将“::before”指定为选择器属性。出于某种原因，mergeStyles() 自己识别了 ":hover::before" 而不是 "::before"。例如，请参见下面代码中的注释。任何帮助表示赞赏。谢谢你。

export const getClassNames = (): ISidebarClassNames => {
    return mergeStyleSets({
        sideNavItem: {
            position: "relative",
            selectors: {
                ":not(:last-child)": {
                    marginBottom: ".5rem",
                },
               // This works and "hover::before" does indeed triggers "scaleY(1)".  
               // Why then does "::before" not work on its own (see below)?
                ":hover::before": {
                    transform: "scaleY(1)",
                },
                // TODO: This does not work in mergeStyles() but does work if coded in SCSS. 
                "::before": {
                    content: "",
                    position: "absolute",
                    top: 0,
                    left: 0,
                    bottom: 0,
                    width: "3px",
                    backgroundColor: "red",
                    transform: "scaleY(0)",
                }
            }
        }

标签： fluent-ui

Answer 1

我想我想通了。罪魁祸首是“内容”属性。因为 CSS 需要一个带引号的字符串（并且因为 mergeStyleSets 将属性本身作为字符串传递），所以该值需要双引号，如下例所示：

--> content: "''"
--> instead of content:""

此外，您是否有一个冒号 (:before) 或两个 (::before) 似乎并不重要。至少在我的系统上它的工作方式相同！

 // this array notation allows us to specify generated class name statically
    sidebar_nav_ul_li: ['sidebar_nav_ul_li', {
        // make the element you're trying to "before" position absolute and the ::before relative
        position: "relative",
        color: currentTheme.palette.white,
        selectors: {
            ":not(:last-child)": {
                marginBottom: ".5rem",
            },
            ":active::before": {
                backgroundColor: currentTheme.palette.themeDarkAlt,
            },
            "::before": {
                content: "''",
                position: "absolute",
                top: 0,
                left: 0,
                height: "100%",
                width: "4px",
                backgroundColor: currentTheme.palette.themeSecondary,
                transformOrigin: "center",
                transform: "scaleY(0)",
                // the transform property (which scales Y from 0 to 1) takes place over .2s,
                // then the transition of width occurs from 3px to 100% over .4s after .2s delay
                // in parallel, the backgroundcolor changes fast in .1s.  this happens upon hover
                // and also upon click which activates :active state.
                transition: "transform 0.3s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.3s, background-color 0.1s",
            },
            ":hover::before": {
                transform: "scaleY(1)",
                width: "100%", // grows from 3px to 100% upon hover.
                border: "1px solid var(--neutralPrimary)",
            }
        }
    }],