Changing style of nested element when parent change state (hover, focus, etc)

[Luko248]

How can I handle something like this:

import * as stylex from "@stylexjs/stylex";

const STYLE = stylex.create({
  reference: {
    display: "flex",
    justifyContent: "space-between",
    textDecoration: "none",
    alignItems: "center",
    gap: "1rem",
    color: "#fff",
    paddingBlock: ".8rem",
    borderBlockEnd: "1px solid #fff",
    textTransform: "uppercase",
    ":first-child": {
      borderBlockStart: "1px solid #fff",
    },
    ":hover": {
    // TODO display: block on url and picture 
    }
  },
  title: {
    fontSize: "2rem",
    display: "flex",
    gap: ".8rem",
    fontWeight: "500",
    letterSpacing: "0.1em",
    lineHeight: "1.5",
  },
  year: {
    fontSize: ".5em",
    translate: "0 .8em",
    lineHeight: "1",
  },
  url: {
    fontSize: "1rem",
    display: "none",
  },
  picture: {
    display: "none",
  },
});

export default STYLE;

[nmn]

There are few discussion topics for this, but the solution is to use a variable. It's also used in the NextJS example in the repo.

Look at Card.tsx and how it uses a variable defined in CardTokens.stylex.ts

// CardTokens.stylex.ts

import * as stylex from '@stylexjs/stylex';

export const tokens = stylex.defineVars({
  arrowTransform: 'translateX(0)',
});

// Card.tsx

import * as stylex from '@stylexjs/stylex';
import { tokens } from '@/app/CardTokens.stylex';

const styles = stylex.create({
  link: {
    // ...
    [tokens.arrowTransform]: {
      default: 'translateX(0)',
      ':hover': 'translateX(4px)',
    },
  },
  span: {
    // ...
    transform: tokens.arrowTransform,
  },
  // ...
});

i.e. You can apply a style to a variable on the parent and then use it on the child.

[Luko248]

It perfectly works, thank you :)