标签: material-ui

Material-UI的AppBar提供title属性但没有subtitle属性.我想在标题下面添加一些较小的文字,但我还没有找到办法.添加
标记会隐藏任何标记,并且更改该区域中任何内容的显示属性也会隐藏它.我能找到的唯一解决方案是严重破坏组件(基本上忽略了title属性并用宽度100%div劫持AppBar,这并不理想).有没有人找到更好的方法来做到这一点？谢谢!

我尝试添加样式RaisedButton,但它不起作用,并且

<RaisedButton type="submit" label="Submit" style={{container:{borderRadius: "5px"}}} primary/>

我也看了这个问题,但仍然没有帮助:

<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
  border-radius: 25px; /* assuming one is not already defined */
}

我的预期结果是这样的

我想制作一个圆形的文本字段和按钮.任何人都可以给我一些建议来帮助我.

任何帮助将非常感谢!

如何在reactjs中禁用material-ui datepicker中的未来日期？

我想在ReactJS中禁用今天的材料-ui之后的未来日期.如何禁用未来日期？

我正在尝试设置max-widthon material-ui的Dialog组件。当我设置最大宽度时，模态将变得不居中。我在这里创建了一个最小的示例：

//npm install material-ui
import React from 'react'
import Dialog from 'material-ui/Dialog';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

function App() {
  return(
    <MuiThemeProvider>
      <div>
        <Dialog open={true} style={{maxWidth: '300px'}}>
          <h2>nice box</h2>
        </Dialog>
        <h1>React App</h1>
      </div>
    </MuiThemeProvider>
  );
}

export default App

结果看起来像这样：

如果删除style={{maxWidth: '300px'}}，则Dialog组件及其子项将按预期居中。

如何在对话框组件上放置maxWidth并保持其正确居中？我已经尝试了很多次，但是没有很多运气。

我想在Material UI中使用DatePicker，并且我希望它始终显示在模板中，但DatePicker的默认设置是集中在Textfield上并显示对话框。

是否可以不使用Dialog和焦点文本字段来显示DatePicker。让它始终在渲染显示中显示DatePicker组件吗？

根据文档，我尝试了以标签为中心的fullWidth，似乎不起作用。如何迫使标签页重新调整为给定的屏幕尺寸？

我正在使用最新的Beta v23

我想在点击事件后删除表格行.我已经创建了迭代并显示删除按钮,但不知道如何在我的情况下将onClick事件从父组件传递给子组件.我试图改变const row到component和通过的onClick像通常但这种方法会破坏我的表.

父组件:

class Home extends Component {
 constructor(props) {
 super(props);
 this.state = { data: []};
}

handleDelete{
 alert('here I want to have code to remove row from table')
}

render() {
 return (
  <div>
    <TableTasks data={this.state.data} header={[{ name: "No"}, { name: "Delete" }]} />
  </div>
);
}}

子组件:

const row = (props, i) =>
<TableRow key={`thr-${i}`}>
  <TableRowColumn>
    {props.nameTask}
  </TableRowColumn>
  <TableRowColumn className="DeleteButton">
    <IconButton>
      <DeleteIcon onClick={?????}/>
    </IconButton>
  </TableRowColumn>
</TableRow>;

export const TableTasks = ({ data, header }) …

我正在尝试根据将selectedprop 设置为true或false 来动态设置菜单列表项的样式。

我试图使用该onClick方法并读取event.target.name，更改value每个菜单项提供的状态，然后最终使用selectedprop检查该值是true还是false。由于某种原因，它没有获取event.taget.name我要记录的日志。

上方渲染：

constructor(props) {
  super(props);
  this.state = { 
    notFound: false,
    value: false,
    anchorEl: null,
    industry: ''
  };
}

handleIndustriesSelect = event => {
  this.setState({ [event.target.name]: event.target.value });
  console.log('target',event.target.name)
  this.handleIndustriesClose()
}

下方渲染

<Menu
  id="industries-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={this.handleIndustriesClose}
  MenuListProps={{
    name: 'industry'
  }}
>
  <MenuItem value={'aerospace'} selected={this.state.industry === 'aerospace'} onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/aerospace'>Aerospace</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/automotive'>Automotive</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/energy'>Energy</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/industrial'>Industrial</MenuItem>
  <MenuItem onClick={this.handleIndustriesSelect} component={Link} to='/home/industry/marine'>Marine</MenuItem> …

我正在尝试呈现完整高度的页面。但是它添加了滚动条，这是不希望的。高度为100％时，我的意思是屏幕的大小。

这是示范。黄色突出显示的部分是添加的多余高度。还有一个水平滚动条（未突出显示）：

这是页面的渲染方法：

return (
    <>
        <Box display='flex' flex='1' justifyContent='space-around'>
            <IndexSelector
                id='index'
                value={symbol}
                onChange={this.onSymbolChange}/>
            <SeriesSelector
                id='series'
                seriesList={Form.seriesList}
                onChange={this.onSeriesChange}/>
            <DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
        </Box>

        <Box height='100%' border='1px solid red' marginTop='50px'>
            <Graph instructions={this.getInstructions()} apiData={this.apiData} />
        </Box>
    </>
)

这是index.css：

html {
  box-sizing: border-box;
}

html, body, #root {
  padding: 0px !important;;
  margin: 0px !important;;
  height: 100vh;
  width: 100vw;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica …

我与使用反应表单验证工作Yup，沿Formik。react-select表单中的一个元素也需要验证。为了验证我正在做使用validationSchema的Formik，以验证形式值的变化。我只需要选择字段的值作为字符串，所以不能采用完整的对象（键值）。选择字段运行良好，但是没有清除验证错误消息。问题是如何使用现有方法验证选择字段？

以下是最少的代码示例。

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { Grid, TextField, Button } from "@material-ui/core";
import { Formik } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import "./styles.css";

function App() {
  const [selectedYear, setSelectedYear] = useState("");

  const testSchema = Yup.object().shape({
    name: Yup.string().required("Enter Name"),
    year: Yup.string().required("Select Year")
  });

  const initialValues = {
    name: "",
    year: ""
  };

  const handleYearChange = …