如何通过withStyles将自定义变量传递至样式文件？

要实现将animationTime prop传递给样式文件，你可以利用Material-UI withStyles的特性：样式函数可以接收组件props作为第二个参数。以下是具体修改步骤：

1. 修改样式文件 #

将样式函数的参数改为(theme, props)，从props中取出animationTime，同时设置默认值避免未传prop时出错：

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

const styles = (theme, props) => {
  const animationDuration = props.animationTime || '30s';
  
  return createStyles({
    marquee: {
      // ...你的其他样式
      '& .scroll': {
        animation: `$marqueeAnimation ${animationDuration} linear infinite`,
      },
    },

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

export default styles;

2. 组件保持原有结构 #

你的组件已经正确接收animationTime prop，withStyles会自动将组件props传递给样式函数，无需额外修改：

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);

3. 使用组件 #

现在你可以按预期传入自定义动画时长：

<Marquee animationTime="20s">你的跑马灯内容</Marquee>

注意事项 #

• 设置默认值能避免未传递animationTime时样式报错；
• 当animationTime prop变化时，withStyles会自动重新计算样式并更新组件，无需手动处理。

内容的提问来源于stack exchange，提问作者Fer Alvarez