Как импортировать материал-пользовательский интерфейс?

Question

Сильно используя material-ui в моем приложении, есть ли способ избежать импорта в каждый компонент приложения, как этот?

import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import Container from "@material-ui/core/Container"; 
....

или вот так:

import {Typography, Box, Grid, Container} from "@material-ui/core";

Есть ли такая вещь? Чтобы мне не нужно было импортировать каждый компонент?

import * from "@material-ui/core"

Заранее спасибо! : D

Answer 1

Да, есть импорт всего в JavaScript. Вы можете сделать это следующим образом:

import * as Mui from '@material-ui/core';

Это помещает все именованные экспорты @material-ui/core в Mui «пространство имен». Затем вы можете легко получить доступ к любому из компонентов, например:

<Mui.Typography>Test</Mui.Typography>

Подробнее о import можно прочитать здесь .

Answer 2

Привет, вы можете сделать это следующим образом:

1. создать папку с именем коллекций
2. создать файл с именем index. js в папке коллекций
3. введите следующий код в индекс. js

export {default as Button} из "@ material-ui / core / Button";

export {default as Card} из "@ material-ui / core / Card";

экспорт {по умолчанию как бумага} из "@ material-ui / core / Paper";

теперь импортируйте коллекцию, как показано ниже:

import * как коллекции из './collections';

Ваш файл компонента будет иметь вид :

import React, {Component} from "react";
import * as collections from './collections';

class Box extends Component {
    render() {
        return (
            <div>
                <collections.Button>
                    Test
                </collections.Button>
                <collections.Card>test</collections.Card>
                <collections.Paper>test</collections.Paper>
            </div>
        );
    }
}
export default Box;