material-ui

问题 I'm using React, Material UI with JSS and React Router. I'm hooking in to <NavLink> to apply an active class like: <NavLink to={'/dashboard'} activeClassName={classes.active} <button className={classes.btn}>Link</button> /> The class is being added fine to the parent, but I'm having an issue applying the style to the child button if it's a class. When targeting the element it works, just not the class. I've looked into using nested JSS, but this still does not work. Any ideas? active: { '&

问题 I am using Material UI with React to create a dropdown. If I keep the dropdown component in my src/app.js everything renders fine. However, if I move it to a separate file, fruits.js I get the following errors: MuiThemeProvider.render() : A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. Unhandled Rejection (TypeError): Cannot read property '_currentElement' of null Here is my code in app.js : import React, { Component }

问题 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

问题 I am using webpack to bundle my react project. My project depends on material-ui for below component: material-ui/Dialog material-ui/styles/getMuiTheme material-ui/styles/MuiThemeProvider material-ui/FlatButton material-ui/TextField webpack-bundle-size-analyzer reports material-ui takes 1.07MB size. Below is my webpack config file: const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const WebpackShellPlugin =

问题 I follow this table example for react material-ui framework and I am looking for a possibility to make my table scrollable horizontally when I have a lot of columns. For instance I have many columns that are squeezed to fit page width, hence their content is shortened. I think it's described in material-ui spec by link Display the full column content and enable horizontal scrolling in the table container. So I wonder if it's possible in material-ui. 回答1: Only overflow-x is not enough. Adding

问题 I have a Material UI submenu being populated from a json. The Main menu item holding this submenu array will be changed according to what is being selected. See image below The Main menu item holding the submenus looks like this <MenuItem primaryText={this.state.selectedLanguage.name} rightIcon={<ArrowDropRight />} style={{userMenuItem}} leftIcon={ <img className="flag" src={this.state.selectedLanguage.icon}/> } menuItems={languageMenu} //see below /> The nested menus are coming from here

问题 Examples here http://www.material-ui.com/#/components/popover are valid for one Popover element on the page only. If one follows their examples it is not possible to have more than one Popover on one page. Because Popovers begin interfering each other. For example. Here is a markup for a single popover. And imagine that you have ten of these in one page: <div onClick={this.openPopover}>Open Popover</div> <Popover open={this.state.open} anchorEl={this.state.anchorEl} anchorOrigin={{horizontal:

问题 I want to use a color from my material-ui theme inside a component like that : const MyComponent = props => ( <UsersIcon color={currentTheme.primary1Color} /> ) So, my need is to extract a value from the current provided theme. I found a working solution to solve this case, using context to retrieve the current theme : const MyComponent = (props, {muiTheme}) => ( <UsersIcon color={muiTheme.palette.primary1Color} /> ) contextTypes = { muiTheme: PropTypes.object.isRequired, } The React context

问题 I am trying to programmatically set focus on (activate) one of the MenuItem(s) inside the Menu component in material-ui. I can manually do it by tabbing to it but I need to do it programmatically in response to a key down event. <Menu disableAutoFocus={true}> <MenuItem .../> <MenuItem .../> ... </Menu> 回答1: Do you mean by select the menuItem programmatically? If so, you can use the concept of 'controlled component'. Here is the example, If this.state.selectedItem = 1, the item 'Maps' will be

问题 I am currently using material-ui library which makes use of reactjs and google material design which can be found here http://www.material-ui.com/#/ I have tried following one of their examples on their github page, which did not work. I have now tried doing a simple test to see if it would render by following this post React JS not rendering. However to my luck nothing has changed and it would not render. Here is my react code: import React from 'libraries/react'; import RaisedButton from