material-ui

问题 I'm trying out React to make a simple application. I like how the full calendar looks like of the following date pickers (after clicking): Material-UI React-Toolbox Is it possible to extract out the full calendar out onto a page without having to click to open the calendar modal/dialog? Just like in Google Calendar apps. For example, I'd like to display the calendar on the main page of the app. 回答1: Have a look at the Calendar component in material-ui library. You should be able to use it

问题 I'm implementing an <IconMenu> in each row of a single-select table. <Table onRowSelection= provides an event for tracking the current row. Unfortunately, if the user first selects the row, then clicks on the <IconMenu> the row first sees the click on the <IconMenu> as a deselect, so there's no selected row when the <IconMenu><MenuItem onClick= fires. I've hacked around some of this (retaining the last-seen selection), but there are still issues; in particular, the row highlight is gone, so

问题 I have 4 tabs on my page. each tab contain different data. i have button inside first tab, basically want to active next tab to show content when user clicks on that button. render(){ return ( <MuiThemeProvider> <div className="background"> <Header/> <div> <Card> <Tabs> <Tab label="General"> <div> <button>Normal button</button> // when user clicks on this button description tab should be active </div> </Tab> <Tab label="Descriptions"> <Description /> </Tab> <Tab label="Content"> <Content /> <

问题 I'm using the library material-ui and I'm currently running the v1.0.0-beta . They updated the library yesterday to v1.0.0-beta.28 but did not update the type definitions so my code fails at run time but not at compile time. From Chrome: webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:80 Uncaught TypeError: Cannot read property 'charAt' of undefined at decomposeColor (webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:80) at lighten (webpack

问题 When I make a custom style for one component, I would have a const like: const useStyles = makeStyles((theme: Theme) => createStyles({ screen: { margin: 0, padding: 0 }, surface: { backgroundColor: theme.palette.primary.main, height: // use windowSize here } }) ); and then do this in the functional component: const windowSize = useWindowSize(); // { width:number, height:number } const classes = useStyles(); return ( <Container fixed className={classes.screen}> <Grid container className=

问题 I cam trying to apply override styles to a compiled class name. my compiled code is like... <div class="MuiListItemText-root-262" > I want to be able to target that specific item like this const styles = () => { MultiListItemText-root-262: { color: red; } } in vanilla CSS I could just do .MultiListItemText-root-262: { color: red; } How can I do the equivalent in JSS? 回答1: You cannot do it this way. The classname "MuiListItemText-root-262" is dynamic, and the id "262" is not reliable and may

问题 I am very new to ReactJS and @Material UI & I tried different ways to workout but no luck yet. Can someone please guide me how I can override ExpandLess and ExpandMore icons with Add and Remove icons of expandIcon. Here is code https://stackblitz.com/edit/react-d2xrnq. And I also notice @Material UI <ExpansionPanel> component using defaultExpanded attribute to expand all Expansion Panel's by default. So, is there any way to collapse all expanded Expansion Panel's with single click? Thank you

问题 I have a Material UI TextField component that needs some color customization for : error focused I am using @material-ui/core 3.8.1 and it's <TextField /> component. I want to avoid having to use <MuiThemeProvider> This is how I have tried based on the recommendation here for the Material-UI <Input /> component and the answer here Reproduction: https://codesandbox.io/s/q9yj0y74z6 回答1: As already stated in the comments, you need to override the classes property. The &$ syntax refers to a class

问题 I'll show you exactly what I mean here. (it's a short video demonstrating exactly how this problem is reproduced and the missing css elements) I also have screenshots of before: and after: Via inspect element it's clear that important css elements just straight up disappear, and it doesn't make any sense why that would happen specifically after clicking on a link, coming back, and refreshing. Has anyone run into a similar problem with material-ui before or think you might know why the css is

问题 I have Appbar <AppBar position="fixed" className={classes.appBar}> <Toolbar style={{ padding: 0 }}> <... /> </Toolbar> </AppBar> on my page when I change the MUI Theme to Light, it's not changing from it's default color import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; const theme = createMuiTheme({ palette: { type: "dark" } }); ReactDOM.render( <MuiThemeProvider theme={theme}> <Index /> </MuiThemeProvider>, document.getElementById("root") ); If I add this to the