如何从代码中分离 Material-UI 项目中与样式相关的属性

如何解决如何从代码中分离 Material-UI 项目中与样式相关的属性

当使用 HTML+CSS 时，可以分离开发人员的角色。 标记在这里

<section class="sky-scraper">
  <div>floor 3</div>
  <div>floor 2</div>
  <div>floor 1</div>
</section>

这里是css

.sky-scraper{
  display: flex;
  flex-direction: column;
}

然而，在 Material-UI 中，设计师必须在 js 源文件中创造奇迹，另一方面，编码人员必须将 flex-direction 等属性直接应用于组件标记。

  <Grid container component="section" direction="column">
    <div>floor 3</div>
    <div>floor 2</div>
    <div>floor 1</div>
  </Grid>

是否可以将这样的设置 [direction="column"] 放在一个单独的文件中，并以类似 CSS 类与 HTML 相关的方式应用？

这种分离的最佳或推荐做法是什么？