标签: material-ui

我很难理解我应该如何构建我的项目。我正在使用材质 UI 和 css 模块进行反应。问题是天知道为什么，来自 MUI 的所有样式都在标题的底部加载，与 css 模块样式相同。经过一番研究，我找到了两个解决方案：

1. 在 css 模块中使用 !important 这很糟糕。
2. 更改注入顺序https://material-ui.com/guides/interoperability/#css-modules

第二个问题是，在多组件项目中，每次引入新组件时都必须像示例中那样手动加载它，这将是非常乏味的。我错过了一些明显的东西吗？您对如何更轻松地更改加载顺序有任何想法吗？

我是 Material ui 的新手，无法弄清楚如何在工具栏上分隔排版组件。我制作了一个短视频来展示我的问题：https : //www.useloom.com/share/f2c391c010c142b4b659d805afe8c825

有人知道怎么做吗？

谢谢。

如何显示旁边带有文本的图像作为复选框的标签？我正在使用 Material UI 和 React。目前我有这个：

<FormControlLabel
control={
    <Checkbox checked={false} onChange={this.handleChange('')} value={id} key={id} />
}
label={
    <img src={avatar} key={id} className="profile-img" width="40px" height="auto" style={{marginRight: "5px"}} />
}

在 label 属性中，我想要图像，然后在它旁边有一个名称，但我不知道如何正确地做到这一点。

在材质UI，延长之间的距离MuiInputLabel和MuiInput，我要重写的marginTop label + .MuiInput-formControl。

但是，createMuiTheme的覆盖仅提供对 Mui 组件 CSS 的直接覆盖，例如：

createMuiTheme({
  overrides: {
    MuiInput: {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

我该怎么做：

createMuiTheme({
  overrides: {
    'label+MuiInput': {
      formControl: {
        marginTop: '1.5rem',
      },
    },
  }
})

谢谢...

我有以下几点：

--- 渲染前 ---

const fontArray = [
  ["Standard", "Standard"], ["Abril FatFace", "'Abril Fatface', cursive"], 
  ["Alfa Slab One", "'Alfa Slab One', cursive"], 
  ["Chonburi", "'Chonburi', cursive"], ["Comfortaa", "'Comfortaa', cursive"], 
  ["Lobster", "'Lobster', cursive"],   ["Pacfico", "'Pacifico', cursive"]
]

--- 在渲染中 ---

<FormControl style={{margin: '10px'}}>
  <InputLabel htmlFor="select-font">Font</InputLabel>
  <Select
    value={this.state.font[0]}
    onChange={(evt)=>this.handleFontChange(evt)}
    inputProps={{
      name: 'font',
      id: 'select-font',
    }}
  >
    {fontArray.map((font, index)=>{
      return(
        <MenuItem key={font} value={font}>
          <div style={{fontFamily: `${font[1]}`}}>
            {font[0]}
          </div>
        </MenuItem>
      )
    })}
  </Select>
</FormControl>

正如您可以猜到的那样，当前font处于保持状态。

--- 这是我处理选择更改的方式 ---

  handleFontChange = (event) => { …

作为标题，
我想在页面完全加载时默认设置复选框“选中”，
但是在关于Material-UI Checkbox component的教程中，没有defaultChecked道具。
当我添加checked={true}道具时，会出现类似
“组件正在更改要控制的复选框类型的不受控制的输入...等”
这样的错误信息，我该怎么办？

有我的代码
我想列出所有组，包括默认组，另一个让用户选择多组。

  export default class AcceptButton extends Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {open: true}
  }
  handleChange = event => {
    this.setState({checked: event.target.checked})
  }
  render() {
    return (
      <Fragment>
       <div>
         group : 
       </div>
       <div className="f-col">
       {
        group.data.map(g => {
          if (data.filter(d => d.gid == g.gid).length != 0) {
            return (
              <FormControlLabel
                key={g.gid}
                control={
                  <Checkbox
                    disabled={true}
                    onChange = {this.handleChange}
                    color="primary"
                    checked={this.state.open}
                  />
                } …

我是 Material UI 的新手，目前正在使用日期时间处理 TextField 显示。我在https://material-ui.com/demos/pickers/ 中测试了代码。这符合我们的需求。

但是，我想更改日期格式，我发现它是由<input>元素实现的。
https://github.com/mui-org/material-ui/issues/10251

我可以有一些示例代码来实现这个要求吗？
我屏幕上的 TextField 显示为中文（因为我的区域设置是香港？），我想将其更改为英文显示。此外，日期格式为 DD/MM/YYYY HH:SS。我想把它改成“DD-MMM-YYYY HH:SS”

我的 PC 上带有本地日期时间的 TextField

下面是代码：

    <TextField
      id="datetime-local"
      label="From"
      type="datetime-local"
      defaultValue="2017-05-24T10:30"
      className={classes.textField}
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
    />

    <TextField
      id="datetime-local"
      label="To"
      type="datetime-local"
      defaultValue="2017-05-24T10:30"
      className={classes.textField}
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
    />    

顺便说一句，我还测试了 material-ui-picker，它不满足我们 BI 的要求。
任何有关更改 TextField 日期时间格式的建议表示赞赏。

非常感谢。

我有一个按钮，点击后会消失。同样单击一次按钮不会导致任何按钮操作运行。我必须单击该按钮，然后单击该按钮消失后所在的区域才能使我的按钮操作生效。

<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
            <Button className={classes.addImage} onClick={this.addPic}>
                <input 
                className={classes.takePic} 
                ref="file"
                id="takePic" 
                type="file" 
                accept="image/*"
                onChange={this.onChange}
                />
                Add 
                <br></br>
                Image

            </Button>
        </Grid>

造型：

 addImage: {
    display: 'flex',
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 90,
    height: 100,
    width: 100,
    justifySelf: 'flex-end',
    marginRight: '12.5%',
},

onChange 函数：

    onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
            newfile: newfile,
            filename: …

我正在尝试使用 Material-UI 的withStyles方法实现一些样式，但是我无法将类作为道具。关于我缺少什么的任何建议？我在下面包含了相关代码，但请注意，<App>为简洁起见，我在此文件中省略了一个组件。

import React from 'react'
import ReactDOM from "react-dom";
import {Paper, Typography} from '@material-ui/core'
import {withStyles} from '@material-ui/core/styles'
import NavBar from "./navBar";

class Recipe extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log('Recipe Did Mount')
    }

    render() {
        const {recipeData, classes} = this.props;
        return (
            <Paper>
                <Typography className={classes.recipeName}>{recipeData.name}</Typography>
                <Typography className={classes.recipeIngredients}>{recipeData.ingredients}</Typography>
                <Typography className={classes.recipeInstructions}>{recipeData.instructions}</Typography>
            </Paper>
        )
    }
}

const styles = {
    root: {
        fontSize: "1.0rem",
        margin: "0px"
    },
    recipeName: {
        fontSize: "1.0rem",
        margin: "0px" …

我想生成一个基于 api 数据的自定义列，即使行被删除，该列也保持排序。像下面的图片，但不是硬编码的数字。我引用的库不是 angular-material-table 而是这个：react-table

这是我正在使用的代码：

import React from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Delete from "@material-ui/icons/Delete";
import Add from "@material-ui/icons/Add";
import Edit from "@material-ui/icons/Edit";
import Search from '@material-ui/icons/Search'
import "./styles.css";

function App() {
  return (
    <div className="App">
      <MaterialTable
        icons={{
          Add: () => <Add />,
          Check: () => <Check />,
          Clear: () => <Clear />,
          ResetSearch: () => <Clear />,
          Delete: () => <Delete />,
          Search: …