How to pass a custom variable to styles file through 'withStyles'?

Question

I'm trying to create a custom marquee component with a custom animation time prop, but i need to pass this prop to my styles file through withStyles function and i dont know how do it

This is how i did the component and how i used the styles

Marquee Component:

import React from 'react';
import { withStyles } from '@material-ui/core';
import styles from './MarqueeStyles';

const Marquee = ({ classes, children, animationTime }) => {
  return (
    <div className={classes.marquee}>
      <div className="marqueeContent scroll">
        <div className="children">{children}</div>
        <div className="children">{children}</div>
      </div>
      <div className="marqueeContent scroll">
        <div className="children">{children}</div>
        <div className="children">{children}</div>
      </div>
    </div>
  );
};

export default withStyles(styles)(Marquee);

Styles file:

import { createStyles } from '@material-ui/core';

const styles = (theme) => {
  return createStyles({
    marquee: {
      ...someStyles

      '& .scroll': {
        animation: `$marqueeAnimation 30s linear infinite`,
      },
    },

    '@keyframes marqueeAnimation': {
      from: {
        transform: 'translateX(0)',
      },
      to: {
        transform: 'translateX(calc(-100% - 1rem))',
      },
    },
  });
};

export default styles;

i want to do something like:

<Marquee animationTime="30s" />

import { createStyles } from '@material-ui/core';

const styles = ({theme, animationTime) => {
  return createStyles({
    marquee: {

      ...someStyles

      '& .scroll': {
        animation: `$marqueeAnimation ${animationTime} linear infinite`,
      },
    },

    '@keyframes marqueeAnimation': {
      from: {
        transform: 'translateX(0)',
      },
      to: {
        transform: 'translateX(calc(-100% - 1rem))',
      },
    },
  });
};

export default styles;