material-ui

问题 There is requirement, I want to give access to user can select their primary color from list like Blue, Orange Green. I have used latest Material UI for front-end. Now I am able to change light to dark theme but my requirement is change primary color also. please help me for same how to code for same. Please check attached screen: 回答1: import React from 'react'; import { render } from 'react-dom'; import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Root from '.

问题 I want to use a table from the material ui library for react : http://www.material-ui.com/#/components/table I display it, it works very well, I m trying to get the object associated with the row I selected, but I don't find the way to do that, I saw the property children or onRowSelection but I can't get my object here is y code. How can I get the entire object of my selected line ? import React, { PropTypes, Component } from 'react' import Table from 'material-ui/lib/table/table'; import

问题 I'm getting the following error while tried to run the application in Mac and Ubuntu. But it runs without any errors in Windows platform. How can i resolve this. Is there any platform specific code in Material UI beta version(v1.0.0-beta.46). I have used the withStyles component, which is an higher order component of material ui. Error: /node_modules/material-ui/styles/withStyles.js Module not found: Can't resolve '@babel/runtime/core-js/map' The below is my code import React from 'react';

问题 update 2: hi, sorry I forgot to mention about the api call in my question earlier I making an api call in redux way. so in my actions/index.js file I am calling my api in getSports method. but the problem is when I try to retrieve the values I am getting an error. A cross-origin error was thrown. React doesn't have access to the actual error object in development. See b.me/react-crossorigin-error for more information. so I debugged the props in the class AsyncValidationForm console.log(

问题 I've been looking through the docs and playing around on my own with material ui and I do not see any sort of setting to be able to choose the time in UTC. It always defaults to my local timezone for the time picker, even if I pass in a UTC Date object. Is anyone aware of a workaround for this? 回答1: Only way is to format your Date into String then use moment-timezone var newYork = moment.tz("2014-06-01 12:00", "America/New_York"); var losAngeles = newYork.clone().tz("America/Los_Angeles");

问题 I would like to override the selected text color for all tabs in material ui for React. I know I can override some portions with code such as this: const theme = createMuiTheme({ overrides: { MuiTab: { root: { color: '#000000', backgroundColor: '#ffffff', '&:hover': { backgroundColor: 'rgba(108, 130, 168, 0.11764705882352941)', color: '#000000', } } } } }); followed by <MuiThemeProvider theme={theme}> <HomePage/> </MuiThemeProvider> However, when the tab is selected it applies a class such as

问题 Scenario : I am using leaflet and React-table as one component. I have two div one below the another. The first div is leaflet map and the second div is react-table. The second div has Expansion Panels inside panel it has react-table. Issue : The issue here is when I expand the panel it taking more than 100% of parent height. It should shrink the first div to 60% and second div to 40% when I expand the panel. ISSUE Expected Output - below image Running Code - Editor 回答1: Add min-height for

问题 I'm trying to create a textfield from Material-UI that update state in a class component. Something is wrong and it returns 'invalid hook call' error. Must Material-UI be always used with React Hooks or could it be used without? import React, { Component } from "react"; import ReactDOM from "react-dom"; import TextField from "@material-ui/core/TextField"; class App extends Component { constructor(props) { super(props); this.state = { year: null, otherAttributes: null }; this.handleChangefor =

问题 In the offical material-ui documentation an example for the AppBar component here looks like this: import React, {Component} from 'react'; import AppBar from 'material-ui/AppBar'; import IconButton from 'material-ui/IconButton'; import IconMenu from 'material-ui/IconMenu'; import MenuItem from 'material-ui/MenuItem'; import FlatButton from 'material-ui/FlatButton'; import Toggle from 'material-ui/Toggle'; import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'; import

问题 Let's say I have a simple code like: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button </Button> </ListItem> When I click anything inside the ListItem the ripple effect is trigger, which is ok, but when I click the button I don't want the ripple effect of the parent component to be triggered. How do I do that? 回答1: You can try to use disableRipple property of ListItem . Set it to true when clicking on button and set