我们可以用更少的代码更改material-ui组件的字体系列.我尝试了很多方法,但我仍然无法做到.我必须单独更改字体系列,这真的是很多工作.有没有其他方法可以做到这一点？

可能是一个基本问题,但我在文档中找不到任何示例.使用material-ui-next beta.30.我有以下内容:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as mui from 'material-ui';
import 'typeface-roboto';

function App() {
  return (
    <div>
      <mui.Reboot />
      <mui.AppBar color="primary" position="fixed">
        <mui.Toolbar>
          <mui.Typography color="inherit" type="title">
            My Title
          </mui.Typography>
        </mui.Toolbar>
      </mui.AppBar>
      <mui.Paper>
        My Content
      </mui.Paper>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

而我想要的mui.Paper内容出现下面的AppBar,而不是它隐藏.是否有某个组件我在某处丢失？

我添加了css悬停属性来禁用按钮的悬停效果,但它似乎对我的情况不起作用,我该如何解决这个问题？

import Button from 'material-ui/Button'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  &:hover {
    background: none;
  }
`
export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}>
      login
    </StyledButton>
  )
}

• 我正在尝试将 react 粘性标头添加到我的步进器中。

• 但问题是如果我在 App.js 中添加它不会呈现。

• 所以我开始调试 App.js 代码。
• 如果我在 App.js 的渲染方法中提供控制台，它不会显示 console.log("App---->");
• 现在我得到了无法读取未定义错误的属性“getState”
• 你能告诉我怎么修吗？
• 以便将来我自己修复它。
• 在下面提供我的代码片段和沙箱

https://codesandbox.io/s/6zv5n0ro9z

应用程序.js

import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        <Sticky>
          {({
            style,

            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop, …

我想使用相同的卡片并使它们居中对齐，我搜索并尝试了一些解决方案，但所有这些都只对齐组件网格，而不是组件内容本身（我需要它们与边框和它们自身的距离相等）。

我正在使用此代码（https://codesandbox.io/embed/32o8j4wy2q）：

<Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '80vh' }}>
      <Grid container item xs={12} spacing={8}>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
      </Grid>
    </Grid>

卡片代码无关紧要，但我只是复制了 material-ui 的示例之一。

另外，如果我将来决定添加或删除一些卡片，我该如何使用 flexboxes（或其他工具）来自动对齐？

我有一个使用5. 我希望该间距不会发生在xs断点处。如何在xs断点处删除它？

你可以在这里看到一个演示：https : //stackblitz.com/edit/hfkmxi?file=demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
}));

export default function SpacingGrid() {
  const classes = useStyles();

  return (
    <Grid container justify="center" spacing={5}>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} …

滚动或选择项目时，多选框弹出框不断跳跃

Codepen https://codesandbox.io/s/material-demo-e5j8h

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: 2
  },
  noLabel: {
    marginTop: theme.spacing(3)
  }
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP …

我对材料 ui 中的不同表单组件感到困惑。

有六个组件与不包含特定输入字段的表单相关：
- FormControl
- FormLabel
- FormControlLabel
- FormGroup
- InputLabel
- FormHelperText

当您查看他们的示例Signin和Signup 时，会在顶部添加一个纯 html 表单标签。

有人能解释一下什么时候使用什么组件来正确构建表单吗？

我在构建我的 react-app 时遇到了大问题。

我在正常的 react-scripts start dev-server 上使用 material-ui/core v.4.10.2 一切正常。

但是当通过 Nginx 或 npm-module serve 构建和提供服务时，渲染无法正常工作......

（我在material-ui Github上看到了类似的问题，但是都被（错误地）关闭了

这是我的 package.json 以防我的依赖项有问题（我当然不认为是这种情况）

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not …

我正在使用 构建一个应用程序Material-UI，到目前为止一切顺利。我正在尝试使用一个Accordion组件构建一个组件，但在尝试导入它时出现错误：

Module not found: Can't resolve '@material-ui/core/Accordion' in [path]

我试图通过默认导入和命名导入来导入它，但结果是一样的。

组件：

import React from 'react';
//  import {
//     Accordion,
//     AccordionSummary,
//     AccordionDetails
//  } from '@material-ui/core';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';


const JobCard = () => {

    return(
        <Accordion expanded={true}>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
            >
                test
            </AccordionSummary>
            <AccordionDetails>
                test
            </AccordionDetails>
        </Accordion>
    );
}

export default JobCard;

我的所有其他组件都可以与导入的 Material-UI 组件一起正常工作。

我在这里错过了什么我做错了吗？有没有人遇到过这样的问题？