Carousel Styles

[knotty swift]

I have a property carousel inside my createStyles:

 carousel: {
    controls: {
      ref: getRef('controls'),
      transition: 'opacity 150ms ease',
      opacity: 0,
    },

    root: {
      borderRadius: '8px',
      overflow: 'hidden',
      '&:hover': {
        [`& .${getRef('controls')}`]: {
          opacity: 1,
        },
      },
    },

    indicator: {
      width: 50,
      height: 4,
      transition: 'width 250ms ease',

      '&[data-active]': {
        width: 80,
      },
    },
  },

Which i want to apply to my carousel styles but its not workin
I added className=classes.carousel.

The example on mantine website just had createstyles and only carousel properties in that like root control etc but mine has other css too so i dont wanna give whole classes as shown in documentation

<Carousel sx={{ maxWidth: 320 }} mx="auto" height={200} classNames={classes}>

[primal cosmos]

It is not how createStyles work, see documentation – https://mantine.dev/styles/create-styles/

[knotty swift]

No i mean im using it that way

its just a snippet

const useStyles = createStyles((theme, params, getRef) => ({
  wrapper: {
    padding: '0 100px',
    margin: '50px 0',
    display: 'flex',
    flexDirection: 'column',
    gap: 20,

    [theme.fn.smallerThan('sm')]: {
      margin: '30px 0',
      padding: '0 15px',
    },
  },

  carousel: {
    controls: {
      ref: getRef('controls'),
      transition: 'opacity 150ms ease',
      opacity: 0,
    },

    root: {
      borderRadius: '8px',
      overflow: 'hidden',
      '&:hover': {
        [`& .${getRef('controls')}`]: {
          opacity: 1,
        },
      },
    },

    indicator: {
      width: 50,
      height: 4,
      transition: 'width 250ms ease',

      '&[data-active]': {
        width: 80,
      },
    },
  },

  slide: {
    '&::after': {
      content: `''`,
      position: 'absolute',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      background:
        'linear-gradient(90deg, rgba(23, 21, 27, 0.9) 12.5%, rgba(23, 21, 27, 0) 83.85%, rgba(23, 21, 27, 0.3) 100%)',
    },
  },

  slide_image: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  },

  metadata_item_parent: {
    position: 'absolute',
    color: 'white',
    display: 'flex',
    flexDirection: 'column',
    gap: 3,
    lineHeight: '1.25rem',
    fontSize: '1.2rem',
    bottom: 30,
    left: 80,
    zIndex: 1,
    textShadow: `1px 1px 2px rgba(0,0,0,0.5)`,
    // WebkitTextStroke: '1px white',
    mixBlendMode: 'normal',
  },

  metadata_item: {
    alignSelf: 'flex-start',
    display: 'flex',
    background: 'rgba(112, 108, 108, 0.644)',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '4px',
    padding: '5px 13px',
    fontSize: '14px',
    lineHeight: '18px',
    borderRadius: '999px',
  },
}));

This is my useStyles. The carousel property only that i want to apply to carousel but classes.carousel is not workin

[primal cosmos]

So you use createStyles function incorrectly and it does not work. Is this right?

[knotty swift]

no i mean it is working but not working on carousel component only

[primal cosmos]

Because you use it incorrectly in carousel styles only

You cannot have nested styles

[knotty swift]

umm then what is the solution?

if i dont make them nested and pass classes whole in carousel as in carousel documentation it might conflict maybe

can i isolate properties for carousel and pass them?

i tried doing in styles but cant get getRef in that 🤔

i think this will work