如何将 material-ui 的样式参数移到其他文件

[CharlesOfBit]

前端初学者，目前在学习 material-ui 的使用，遇到如下问题 例如一个 Grid

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
/>

经过 prettier 格式化后，参数占用了太多行，导致结构看起来不清晰，我希望把 container，direction 等参数移动到其他文件里，如

<Grid class={"grid-root"}/>

grid-root: {
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
}

目前看到的办法

一个是自定义<Mygrid>，这种的问题是 grid 比较多的话需要自定义很多 grid，改起来不好改，

一个是用 material-ui 自带的 makeStyles，但是好像只能使用 css 的参数，我更想使用 material 的参数。

想请教正式项目中如何处理这一类问题。

[wobuhuicode]

```
<Grid
container
direction="row"
justifyContent="center"
alignItems="center"
/>
```
=>
```
const p = {
container:"container",
direction:"row",
justifyContent:"center",
alignItems="center"
}
<Grid
{...p}
/>
```

[CharlesOfBit]

@wobuhuicode 这种写法在 ts 下报类型错误
```
Type 'string' is not assignable to type 'GridItemsAlignment | undefined'. TS2769

25 | <div>
> 26 | <Grid
| ^
27 | {...p}

```

[CharlesOfBit]

或者说，大家在实际开发中，碰到类似的问题，是怎么解决的，难道都要忍受这个超长的参数列表吗

[CharlesOfBit]

问题已解决，方法是 p 加类型`GridProps`

[Trim21]

如果只是觉得不好看的话，换掉 prettier 不就好了…

[wobuhuicode]

@CharlesOfBit 是的，增加类型描述。粗暴点加个 as any 也可以
{...(p as any)}

[CharlesOfBit]

@Trim21 不好换呐，我是初学者，需要 prettier 来规范代码，否则会写的乱七八糟。

[HCT1]

@CharlesOfBit 以 react 和 vscode 的 py 关系，tsx 完全可以用 vscode 自带的 formatter 来格式化啊，设置里搜 format，可配置项不比 prettier 少

[TimPeake]

prettier 可以配置参数换行的。这种属性参数换行，其实是比较合理的格式方法，只是你个人不太喜欢。
可以百度下配置 把 超出换行格式化 设置大点

[maxin6]

如果不想配置 prettier ，可以在不想被 format 的代码上加上一行注释：// prettier-ignore ，这样 prettier 就会忽略这个注释的下一行代码。