标签: material-ui

在 Material-UI v5 中，一些 API 使用是从 导入的@mui/material/styles，例如useTheme. 一些 API 使用是从 导入的@mui/styles，例如makeStyles. 我可以仅使用一个库中的那些与样式相关的 API，或者@mui/styles吗@mui/material/styles？因为，在 Material-UI v4 中，我从'@material-ui/core/styles'或导入了所有与样式相关的 API 'material-ui/styles'。

我打算使用Material-UI CSS框架(http://material-ui.com)来设计网站的前端,但我对如何使用这个框架一无所知.

我对NPM,Browserify等不太熟悉.我只需要知道如何开始学习使用这个CSS框架的方法.

谢谢你的帮助!

我试图使用mountEnzyme来测试我的组件,其中嵌套了几个Material UI组件.运行测试时出现此错误:

TypeError: Cannot read property 'prepareStyles' of undefined

经过一番挖掘,我确实发现主题需要在上下文中传递下来.我在测试中这样做但仍然得到这个错误.

我的测试:

import expect from  'expect';
import React, {PropTypes} from 'react';
import {mount} from 'enzyme';
import SearchBar from './SearchBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

function setup() {
  const muiTheme = getMuiTheme();

  const props = {
    closeSearchBar: () => {},
    fetchSearchData: () => {},
    data: [],
    searching: false
  };

  return mount(<SearchBar {...props} />, {context: {muiTheme}});
}

describe('SearchBar Component', ()=> {

  it('Renders search toolbar properly', () => {
    const wrapper …

我无法弄清楚我是否正在使用正确的方法让login/logout按钮在使用material-ui-next("material-ui":"^ 1.0.0-beta.22", )

似乎他们iconElementRight=从api中删除了.我们必须<Grid>在appbar中使用now吗？感觉有点笨拙.在appbar中浮动按钮(例如登录)的正确方法是什么？

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

新的反应转子语法使用该Link组件在路径上移动.但是如何与它结合materiaul-ui？

就我而言,我使用制表符作为主导航系统,所以理论上我应该有这样的东西:

const TabLink = ({ onClick, href, isActive, label }) => 
  <Tab
    label={label}
    onActive={onClick}
  />



export default class NavBar extends React.Component {
  render () {
    return (
      <Tabs>
        <Link to="/">{params => <TabLink label="Home" {...params}/>}</Link>
        <Link to="/shop">{params => <TabLink label="shop" {...params}/>}</Link>
        <Link to="/gallery">{params => <TabLink label="gallery" {...params}/>}</Link>
      </Tabs>
    )
  }
}

但是当它呈现时,material-ui会抛出一个错误,即孩子Tabs必须是一个Tab组件.有什么办法可以继续？如何管理选项卡的isActive道具？

提前致谢

我有一个表单（抱歉太长了），用户输入姓名、电子邮件、电话、评论非常简单：

    <form
        className={classes.root}
        data-testid="getting-started-form"
        onSubmit={handleSubmit(onSubmit)}
    >
        <div style={{ width: '400px' }}>
            <div style={{ width: '100%'}}>
                <Controller as={<TextField
                    label="Name"
                    id="name"
                    name="name"
                    type="text"
                    value={name}
                    placeholder="Name"
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement;
                        setName(target.value);
                    }}
                    inputProps={{
                        'data-testid': 'name'
                    }}
                />} name="name" rules={{ required: true }} control={control}
                />
                {errors.name && <span>Name is required</span>}
            </div>
            <div style={{ width: '100%' }}>
                <Controller as={<TextField
                    label="Email"
                    id="email"
                    name="email"
                    type="text"
                    value={email}
                    placeholder="Email"
                    style={{ width: '100%' }}
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement; …

我已经安装了@material-ui/core和@material-ui/icons。

我正在尝试从材质图标导入“FileDownloadIcon”。

安装“@material-ui/core”：

npm i @material-ui/core

安装“@material-ui/icons”：

npm i @material-ui/icons

这是我尝试导入“FileDownloadIcon”的方式：

import FileDownloadIcon from '@mui/icons-material/FileDownload';
<div className="download-file">
        <Button
                variant="contained"
                color="primary"
                onClick={() => getResume()}
            >
            <FileDownloadIcon />
            Download Resume
        </Button>
</div>

但出现这样的错误“找不到模块：无法解析‘E:\frontend\src\component\Details’中的‘@mui/icons-material/FileDownload’”

哪里有问题？

我正在尝试material-ui,react而且我遇到了一个没有解雇事件的问题.我在引导应用程序的同时安装了react-tap-event-plugin和我一起调用injectTapEventPlugin().

toggleMenu 永远不会在以下代码段中调用:

/** @jsx React.DOM */
var React = require('react');
var mui  = require('material-ui');
var LeftNav = mui.LeftNav;
var MenuItem = mui.MenuItem;
var AppBar = mui.AppBar;
var App = React.createClass({

  getInitialState: function () {
    return {
      message: 'Hello World!'
    };
  },
  toggleMenu: function () {
    console.log('clicked hamburger'); //<-- This is never fired
    this.refs.menu.toggle();
  },

    render: function() {
        var menuItems = [{ route: 'get-started', text: 'Get Started' }];
        return (
<div>
    <AppBar …

我正在使用Material-ui的Tabs,它们受到控制,我将它们用于(React-router)链接,如下所示:

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
    <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
  <Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

如果我当前正在访问仪表板/数据并点击浏览器的后退按钮,我会(例如)转到仪表板/用户,但突出显示的选项卡仍然停留在仪表板/数据上(值= 2)

我可以通过设置状态来改变,但是当按下浏览器的后退按钮时我不知道如何处理事件？

我发现了这个:

window.onpopstate = this.onBackButtonEvent;

但每次状态改变时都会调用此命令(不仅仅是在后退按钮事件中)

我正在尝试一些非常简单的事情：使用 Material-UI 主题为网站构建两个主题：

一个light主题和dark一个，但效果不佳：主题位于每个 Material-UI react 元素上，但 html 文档上的根元素保持相同的默认白色背景。

当然可以通过纯.css攻击body来改变：

body {
  background-color: #222;
}

但是我想用 React 动态改变它，我虽然这会起作用，但它不会：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const themeLight = createMuiTheme({
  palette: {
    background: {
      default: "#e4f0e2"
    }

    },
});

const themeDark = createMuiTheme({
    palette: {
      background: {
        default: "#222222",
      }

    },
});

ReactDOM.render(
     <MuiThemeProvider theme = { themeDark }> …