material-ui-next

Material UI - Drawer does not open

老子叫甜甜 提交于 2019-12-31 05:07:30
问题 I have a react app with Material-UI 1.2. Although the state is properly updated, the drawer does not open close. I have also correctly applied the bind on onLeftIconButtonTouchTap . Here is my implementation of the TemporaryDrawer : // .. imports const styles = { list: { width: 250, }, fullList: { width: 'auto', }, menuButton: { marginLeft: 12, marginRight: 36, }, }; class TemporaryDrawer extends React.Component { render() { const { classes, toggleDrawer, isOpen } = this.props; const sideList

FOUC when using @material-ui/core with NextJS/React

不打扰是莪最后的温柔 提交于 2019-12-13 01:27:27
问题 My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/): /* eslint-disable no-unused-vars */ import React, { PureComponent, Fragment } from 'react'; import Head from 'next/head'; import compose from 'recompose/compose'; import Layout from '../components/Layout'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const styles = { root: { textAlign: 'center', paddingTop: 200, }, p: { textTransform:

Using a Link component with ListItem and Typescript

谁说胖子不能爱 提交于 2019-12-12 12:13:29
问题 I'm using material-ui v3.5.1 I want to make ListItem use the Link component like so: <ListItem component={Link} to="/some/path"> <ListItemText primary="Text" /> </ListItem> but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says: The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>" Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322] Is there a

How can I set an static outlined div similar to Material-UI's outlined textfield?

こ雲淡風輕ζ 提交于 2019-12-11 10:54:56
问题 I want wrap some TextFields in a outlined container and I found this answer. This work as i want: But when I click in an inside textfield all the texfields focused: This is my code: import React from "react"; import ReactDOM from "react-dom"; import OutlinedDiv from "./OutlinedDiv"; import TextField from "@material-ui/core/TextField"; import Grid from "@material-ui/core/Grid"; function App() { return ( <div className="App"> <OutlinedDiv label="DIV"> <Grid container justify="center" alignItems

Global outlined override

佐手、 提交于 2019-12-02 18:51:49
问题 In what way can I override global theme such that all components that are using variant = 'outlined' are impacted by that style. Also would like to override events like focus, hover, etc.. "@material-ui/core": "^3.9.2", 回答1: Offhand, I'm not certain how many different components have an "outlined" variant. You won't be able to address all of them in a single CSS rule, but they can each be dealt with separately in your theme. In this answer I will just address OutlinedInput and outlined Button

Material UI - Drawer does not open

帅比萌擦擦* 提交于 2019-12-02 10:47:54
I have a react app with Material-UI 1.2. Although the state is properly updated, the drawer does not open close. I have also correctly applied the bind on onLeftIconButtonTouchTap . Here is my implementation of the TemporaryDrawer : // .. imports const styles = { list: { width: 250, }, fullList: { width: 'auto', }, menuButton: { marginLeft: 12, marginRight: 36, }, }; class TemporaryDrawer extends React.Component { render() { const { classes, toggleDrawer, isOpen } = this.props; const sideList = ( <div className={classes.list}> <List> <ListItem button> <ListItemIcon> <InboxIcon /> <