Issue with Sytle attribute "gap" set in FluentUI-React component (@fluentui/react-components)

(1) Share

Report

Posted on by Makarand Keer

Hi,

I have my custom component built usin gFluentUI (9.4.6) component (@fluentui/react-components) and I am using following code to set style

const useStyles = makeStyles({
  buttonList: {
    display: "flex",
    flexDirection: "column",
    gap: "50px",
  },
});

However, when this component is rendered in PCF Test environment and also in Dynamics 365 Form as Custom Component, "gap" element of the style is stripped off. Due to which my components are not rendering properly on UI.

When same component is rendered in standard react app (create-react-app), it does gets rendered properly with "gap" element so most likely this issue is with PCF.

What is resolution for this issue?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)