Question

我希望我的MaterialUI组件存在于同一命名空间下，以避免将名称与其他库混合使用（例如，很明显<Box>的意思是<MaterialUI.Box>，而不是<SomeOtherLibrary>.Box>。从逻辑上讲，这似乎很简单，但是就我的一生而言，即使经过广泛的谷歌搜索，我也找不到答案。

MaterialUI的建议

在需要时以一种方式逐一导入组件：

import Box from '@material-ui/core'
import Button from '@material-ui/core'
import Whatever from '@material-ui/core'

我想做什么（伪代码，不是真正的ES6）：

import {Box, Button, Whatever} under namespace MaterialUI from '@material-ui/core'

以便我可以使用类似的

<MaterialUI.Box>
<MaterialUI.Button> ...
<MaterialUI.Whatever> ...

这似乎只有在以这种方式导入整个库时才可用：

import * as MaterialUI from '@material-ui/core'

这是明显的不良做法。

我想我可以使用类似的东西

import Box as MaterialUI_Box from '@material-ui/core'
import Button as MaterialUI_Button from '@material-ui/core'
import Whatever as MaterialUI_Whatever from '@material-ui/core'

但这就像手动重命名名称空间，并且涉及很多重复。

因此，如何不导入整个库，而仍然获得我实际选择导入的组件的名称空间的好处？

我希望我已经很清楚了，我的问题对其他可能分享我不确定性的人也很有价值。谢谢：-）

Answer 1

从您自己的文件中的材料集中导入，然后用它在您的视图中导入。可能是这样的

// File: myMaterial.js
import { Button, Card } from '@material-ui/core';

export default {
  Button,
  Card
}

现在在您看来：

import MyMaterial from '../myMaterial';

使用它：

<MyMaterial.Button />
<MyMaterial.Card />

在公共命名空间下导入多个MaterialUI组件而不导入整个库的最佳方法？

1 个答案: