material-ui

问题 I'm trying to update some of my old Typescript that used material-ui@next to the new @material-ui/core. Typescript Version: 2.8.3 @material-ui/core: 1.1.0 I've implemented a very simple component that takes a single prop but the typescript compiler throws the following error when it is used src/App.tsx(21,26): error TS2322: Type '{ classes: true; imageUrl: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Placeholder> & Readonly<{ children?: ReactNode; }>...

问题 I am using "@material-ui/core": "^3.9.3" with "@material-ui/pickers": "^3.0.0-beta.1" When I import anything from @material-ui/pickers I get: Uncaught TypeError: Object(...) is not a function at Module../node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js (material-ui-pickers.esm.js:25) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Module../src/views/Event/Create.js (User.js:18) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Module../src/Routes

问题 Maybe this is just a basic question, but so far have not found any reasonable explanation. I am a beginner in react and using material-ui very recently. I am not very clear on when to use an Input vs. Textfield for building a form? Looking at documentation, it feels like TextField is a superset of what Input can do, but not sure. Material-ui site uses examples for text field and input both, without stating benefits of one over the other and any use cases. Please suggest. 回答1: For most use

问题 I'm creating date range picker with react material ui. My logic behind this functionality is to select required date and if required date has been selected, disable all past dates from selected dates. How to implement this react material ui? Here is my code, import React from 'react'; import {render} from 'react-dom'; import DatePicker from 'material-ui/DatePicker'; function disablePrevDates(date) { return date.getDay() === 0; } class App extends React.Component { render() { return ( <div>

问题 I'm using the radio button components available from material-ui.com and have set labelPlacement="start" . This has placed the label on the left side, but I would also like the labels to be left aligned while leaving the radio buttons on the right. <RadioGroup name="switching" value="switching" onChange={this.handleEstablishingChange.bind(this)} > <FormControlLabel value="switching" control={<Radio />} labelPlacement="start" label={this.props.lang().justswitching} /> <hr /> <FormControlLabel

问题 class MyStupidComponent extends React.Component { render() { return ( <div style={{width: "100%"}}> <div style={{height: "10%"}}> <AppBar title="MY APP" /> </div> </div> ); } } ReactDOM.render(<MyStupidComponent />, document.getElementById("stupid-app")); Trying the jsx above AppBar component should fill all width and 10% of height from its div parent but it doesn't happen and it is shown a weird blank space on its top, left and right corner: What is wrong with my component's style? I am

问题 I'm using 'material-ui' and trying to get a table element to change color when the element has a certain value. Below is the code I tried, if the cell value is "Out of Zone", the background should go red'ish. The table renders fine, but toggling the color change doesn't work, how come (or is my approach all wrong)? function renderRowColumn(row, column) { if (row.status == "Out of Zone") { return ( <TableRowColumn className="ae-zone"> {row[column.name]} </TableRowColumn> ) } return (

问题 I have several styled components, using the withStyles HOC to export them, but i can't override some rules because jss mix the order of mui stylesheets with my component's stylesheets. How can I push my styles to the end? 回答1: Me and my team also stumbled upon this and we managed to find a solution. Apparently withStyles , takes an option object as parameter. So in order to solve this issue, you need to pass a parameter index with a value of 1 . So what you get is this: withStyles(styles,

问题 I want to know how can I open the directory to upload a file using an IconButton? <IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()} type='file' /> using the code below shows the icon button and another button for the upload file <IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}> <input type="file type='file'> </IconButton> 回答1: A few things: You don't need type='file' on the IconButton, just on the input IconButton does not

问题 I'm trying to get the id,name, and value from Select field element of Material-UI react component. This is my container: //some code is removed to keep things simple class MyContainer extends Component { constructor(props) { super(props); } render() { return( <MyComp onChange={this._onChange.bind(this)} /> ); } _onChange(evt) { console.log(evt.target); console.log(evt.target.id); //blank console.log(evt.target.name); //undefined console.log(evt.target.value); //html value of selected option!