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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1231 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端初学者，目前在学习 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 的参数。

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

10 条回复 • 2021-10-29 09:54:13 +08:00

wobuhuicode

2021-08-15 22:37:48 +08:00

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

CharlesOfBit

2021-08-15 23:33:23 +08:00

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

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

```

CharlesOfBit

2021-08-15 23:44:58 +08:00

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

CharlesOfBit

2021-08-16 00:19:36 +08:00

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

Trim21

2021-08-16 08:04:56 +08:00 via Android

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

wobuhuicode

2021-08-16 09:22:12 +08:00

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

CharlesOfBit

2021-08-16 11:33:14 +08:00

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

HCT1

2021-08-16 13:42:43 +08:00

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

TimPeake

2021-08-17 08:53:49 +08:00

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

maxin6

2021-10-29 09:54:13 +08:00

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