Style Divider with color value only known at runtime (v9)

[Robstei]

Hey,
My goal is to style the Divider component to a color value that i fetch at runtime.

The docs show a way to change the color of the before and after pseudo-elements in makeStyles.

In another issue here, I found the suggestion to use inline styles in addition to style a component based on prop values. I am not aware of a way to use inline styles to style the before and after elements.

What is the recommended way to style the component based on a hex value received as props / via fetch?

[pradeept95]

Hi @Robstei ,
Inline styling does not support pseudos or at-rules (e.g., @media, :before, :after etc). Also, you can not use dynamic variable in css-in-js here. The most easiest solution is to use dynamic CSS variable and use variable to define styles. I have created some example that might help you.

import * as React from "react";
import { Divider, DividerProps } from "@fluentui/react-components";

type CustomDividerProps = {
  color: string;
} & DividerProps;

import { makeStyles, shorthands } from "@fluentui/react-components";

const useStyles = makeStyles({
  customLineColor: {
    "::before": {
      ...shorthands.borderColor("var(--divider-color)"),
    },
    "::after": {
      ...shorthands.borderColor("var(--divider-color)"),
    },
  },
});

export const CustomDivider: React.FC<CustomDividerProps> = (props) => {
  const { color, ...rest } = props;
  const style = { "--divider-color": color } as React.CSSProperties;

  const classes = useStyles();

  return (
    <Divider style={style} className={classes.customLineColor} {...rest} />
  );
};

Now you can use CustomDivider as follows:

<CustomDivider color={"red"} />
  <br />
  <CustomDivider color={"blue"} />
  <br />
  <CustomDivider color={"#189a3c"} />

Hope this is cover your scenarios.

[pradeept95]

[Robstei]

Thanks a lot @pradeept95 :)

I created a solution with your input that is sufficient for now.

Would be neat to do this without using "as" in the future.