Library design - supporting className prop

[sumanbh]

We're exploring using StyleX in a component library, and we have a use case where we need to support arbitrary className prop in components. This is because various third-party vendors use classes to omit or mask element data (e.g. input value) when reporting.

Because stylex.props returns an object with className and style keys, I'm thinking of merging user provided class into result from stylex. Is something like this the right approach?

interface MyComponentProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
  style?: stylex.StyleXStyles;
}

const myStyles = stylex.create({
  container: {
    padding: '16px',
  },
});

// Merge custom className with classes returned by StyleX 
function merge(xstyle: ReturnType<typeof stylex.props>, className?: string) {
  return {
    className: classnames(className, xstyle.className),
    style: xstyle.style,
  };
}

function MyComponent({ className, style, ...props }: MyComponentProps) {
  return (
    <div
      {...props}
      {...merge(stylex.props(myStyles.container, style), className)}
    />
  );
}

[nmn]

No. This is not the right approach. Instead of accepting arbitrary className strings, accept stylex styles instead. This pattern has been documented.

Mixing StyleX and non-StyleX styles on the same HTML element will result in unpredictable styling and should be avoided. Instead merging styleX styles is a core feature and will always merge consistently.

If you're trying to create a component library using StyleX and expect the users of that library to customise the styles of the components, the users of the components should be using StyleX as well.

[sumanbh]

Maybe I wasn't clear but we're not trying to apply styles via className - rather we have third-party vendors (which we don't control) that look for specific classes that they use to mask data for privacy reasons when reporting (e.g. session replay, screen sharing etc).

[nmn]

In that case this approach should be fine.