material-ui

问题 I'm using material-ui in my react web application. I need the icon 'action/description' in a component but in the outline version. According to the docs: For convenience, the full set of google Material icons are available in Material-UI as pre-built SVG Icon components. So I can do this to get the "filled" version: import ActionDescription from 'material-ui/svg-icons/action/description' <div className="number"> <ActionDescription /> </div> But how do I get the "outline" version? I tried

问题 I want to align my button to the right of the parent. I was wondering if there is a proper way to do it in material-ui . I could use a <Grid container justify="flex-end"> but then I would have to use another <Grid item /> . Seems too much of work. Or maybe I am just better off using plain old CSS, messing around with float: right and dealing with the apparent zero height of the element. 回答1: Try this <Grid container alignItems="flex-start" justify="flex-end" direction="row"> <Button variant=

问题 I am using Material UI to make a application Layout. To make my layout responsive i use import ResponsiveMixin from 'react-responsive-mixin'; the ResponsiveMixin's doc doesn't provide me React.Component classes as example, so i try to use this import reactMixin from 'react-mixin'; instead. here my code: import import React from 'react'; import reactMixin from 'react-mixin'; import ResponsiveMixin from 'react-responsive-mixin'; import Paper from 'material-ui/lib/paper'; contentStyle const

问题 I am attempting to get the navigation, default hamburger icon on the left of AppBar ( http://www.material-ui.com/#/components/app-bar ) from Material-UI framework to slide open the Drawer component when clicked ( http://www.material-ui.com/#/components/drawer ). But once clicked, I am getting the following error and I can't see to figure out: Uncaught TypeError: Cannot read property 'open' of undefined Any insight or guidance on it would be greatly appreciated. Thank you in advance. import

问题 I added a Material-UI Date Picker in my React Single Page Application but I don't know how to change the header color. I tried to change it from muiTheme pallete property but the header is the only color that remain the same: var muiTheme = getMuiTheme({ palette: { primary1Color: '#135DAE', primary2Color: '#135DAE', primary3Color: '#135DAE', accent1Color: '#EF243A', accent2Color: '#135DAE', accent3Color: '#135DAE', }, appBar: { height: 50, }, }) Here is the Date Picker's HTML code:

问题 I added a Material-UI Date Picker in my React Single Page Application but I don't know how to change the header color. I tried to change it from muiTheme pallete property but the header is the only color that remain the same: var muiTheme = getMuiTheme({ palette: { primary1Color: '#135DAE', primary2Color: '#135DAE', primary3Color: '#135DAE', accent1Color: '#EF243A', accent2Color: '#135DAE', accent3Color: '#135DAE', }, appBar: { height: 50, }, }) Here is the Date Picker's HTML code:

问题 I'm having a problem with changing button text color directly in the Material UI theme. Changing primary color + button font size works fine, so the problem isn't in passing the theme on. Here's my code: import React from 'react'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; import { lightBlue } from 'material-ui/colors'; import styled from 'styled-components'; const theme = createMuiTheme({ palette: { primary: lightBlue, // works }, raisedButton: { color: '#ffffff',

问题 Webpack/CSS Experts! My NodeJS/React application has the following structure, where I use Webpack 3.8.1 to package & bundle files. -app |--actions |--constants |--components |--containers |--css |--reducers |--store -common -server -webpack |--rules |--css |--javascript |--externals |--paths |--resolve |--webpack.config.js Everything works as expected in development and production but there is one problem that I have been struggling with: External node modules CSS . When I add a new

问题 This question already has answers here : Speech bubble with arrow (3 answers) Closed last year . I want to give the material-ui popover this following shape shown in the image. I have created the popover working Demo using react and shared the link for editing purpose. Any help ? => Working Demo I'm Sharing the code here also but it would be good if the stackblitz working demo would be in use for editing purpose: import React, { Component } from 'react'; import Popover,

问题 I'm using material-ui in react. Let's say I have this component with these styles const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.grey[100] } }, addIcon: (props: { dragActive: boolean }) => ({ height: 50, width: 50, color: theme.palette.grey[400], marginBottom: theme.spacing(2) }) })); function App() { const classes = useStyles(); return ( <Grid container>