Trying to target a child with a specific class, or add css modules, but no approach is working for me

[tilnea]

Hello!

So, I have a button, and in that button I want to be able to have Icons, unlimited with icons, and add styles to these.

All my icons are from react-material-symbols, and they have the class "material-symbols" on them.

So the ideal thing I wish to do is

const styles = stylex.create({
  button: {
    ":& .material-symbols": {
      fontSize: "1.25em",
      color: "red",
    },
  },
})

but from what I can find, that does not work right?

So my second approach was to add css-modules as well (even if that does not feel great) and do

.button [class~="material-symbols"] {
  font-size: 1.25em;
 color: red;
}

but, I don't seem to be able to put classname at the same time as my StyleX styles. Can I?

Any ideas how I can target the "material-symbols" class from my button?

(which looks like this btw)

<button
  disabled={disabled}
  {...stylex.props(
   styles.button
  )}
  {...props}
  className={`${css.button}`}
>
  {isLoading && (
    <span {...stylex.props(styles.spinner)}>
      <Spinner />
    </span>
  )}
  {children}
</button>

And I want to use it like this

<Button>
    <span>Stars</span>
    <MaterialSymbol fill={true} icon="star" />
    <MaterialSymbol icon="star" />
    <MaterialSymbol icon="star" />
    <MaterialSymbol icon="star" />
</Button>

[nmn]

The best way to do this is by adding a data-* attribute on the button and use that in your global CSS file.

So, add the attribute:

<button
  disabled={disabled}
  {...stylex.props(
   styles.button
  )}
  {...props}
  data-selector="icon-button"
>
  {isLoading && (
    <span {...stylex.props(styles.spinner)}>
      <Spinner />
    </span>
  )}
  {children}
</button>

And use it in a standalone CSS file (not a CSS module, just a regular CSS file).

[data-selector="icon-button"] [class~="material-symbols"] {
  font-size: 1.25em;
  color: red;
}

Some additional notes:

• ":& .material-symbols" does not work in StyleX. StyleX does not understand & like traditional CSS pre-processors.
• This pattern is explicitly disallowed by StyleX, because you're doing "Styling at a distance". The StyleX way is to apply the styles on the icon elements directly.
  • I assumed you couldn't do this, perhaps because the icon elements are being rendered by code not in your control. So I suggest using a CSS file and treat it like a hack.
  • If you can control how the icons are rendered, I suggest applying the styles on that element directly instead.
• StyleX intentionally makes it harder to apply your own classes on elements so you don't try to mix multiple styling systems which can result in conflicts and unreliable behavior.

How all of this helps. Lmk, if you're still dealing with issues or need any further clarification.

[tilnea]

Okidoki, thanks :)