V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
CharlesOfBit
V2EX  ›  React

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

  •  
  •   CharlesOfBit · 2021-08-15 20:32:05 +08:00 · 1775 次点击
    这是一个创建于 1180 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端初学者,目前在学习 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
        1
    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
        2
    CharlesOfBit  
    OP
       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
        3
    CharlesOfBit  
    OP
       2021-08-15 23:44:58 +08:00
    或者说,大家在实际开发中,碰到类似的问题,是怎么解决的,难道都要忍受这个超长的参数列表吗
    CharlesOfBit
        4
    CharlesOfBit  
    OP
       2021-08-16 00:19:36 +08:00
    问题已解决,方法是 p 加类型`GridProps`
    Trim21
        5
    Trim21  
       2021-08-16 08:04:56 +08:00 via Android
    如果只是觉得不好看的话,换掉 prettier 不就好了…
    wobuhuicode
        6
    wobuhuicode  
       2021-08-16 09:22:12 +08:00
    @CharlesOfBit 是的,增加类型描述。粗暴点加个 as any 也可以
    {...(p as any)}
    CharlesOfBit
        7
    CharlesOfBit  
    OP
       2021-08-16 11:33:14 +08:00
    @Trim21 不好换呐,我是初学者,需要 prettier 来规范代码,否则会写的乱七八糟。
    HCT1
        8
    HCT1  
       2021-08-16 13:42:43 +08:00
    @CharlesOfBit 以 react 和 vscode 的 py 关系,tsx 完全可以用 vscode 自带的 formatter 来格式化啊,设置里搜 format,可配置项不比 prettier 少
    TimPeake
        9
    TimPeake  
       2021-08-17 08:53:49 +08:00
    prettier 可以配置参数换行的。这种属性参数换行,其实是比较合理的格式方法,只是你个人不太喜欢。
    可以百度下配置 把 超出换行格式化 设置大点
    maxin6
        10
    maxin6  
       2021-10-29 09:54:13 +08:00
    如果不想配置 prettier ,可以在不想被 format 的代码上加上一行注释:// prettier-ignore ,这样 prettier 就会忽略这个注释的下一行代码。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5637 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:50 · PVG 09:50 · LAX 17:50 · JFK 20:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.