How to add a link to a List in material-ui 1.0?
to use with “react-router-dom” import { Link } from “react-router-dom”; <ListItem button component={Link} to=”/design”> the example is based in this section: docs
material-ui
Bootstrap vs Material UI for React?
I tend to be verbose so I’ll put the concise answer up top here: Conclusion: Whoever said it was bad to use both might just be expressing their opinion, in reality saying it’s bad to use both really lacks context in what you’re designing. @user3770494 made a very good point- but the point, while valid … Read more
Material-UI Grid Item height
2022 Update (MUI v5): MUI v5 now relies on the CSS grid. Check out the official documentation here: https://mui.com/system/grid With this setup, you can set display: “grid”, gridTemplateColumns: “repeat(5, 1fr)” on the container Box element to render 5 grid items with the same width and height. See an example with both fixed and variable number … Read more
Getting the value in the React material-UI Autocomplete
Solved by using passing in the (event, value) to the onChange props. <Autocomplete onChange={(event, value) => console.log(value)} // prints the selected value renderInput={params => ( <TextField {…params} label=”Label” variant=”outlined” fullWidth /> )} />
How to use an SVG file in a SvgIcon in Material-UI
1. Using <Icon/> component and an <img/> element To use a SVG file as an icon, I used the <Icon/> component with an <img/> element inside, setting the height: 100% to the img element and textAlign: center to the root class of the <Icon/> component did the trick: JSX: import Icon from ‘@material-ui/core/Icon’; import { … Read more
React + Material-UI – Warning: Prop className did not match
The problem is the SSR rendering in Next.js, which produces the style fragment before the page is rendered. Using Material UI and Next.js (as the author is using), adding a file called _document.js solved the problem. Adjusted _document.js (as suggested here): import React from ‘react’; import Document, { Html, Head, Main, NextScript } from ‘next/document’; … Read more
Changing font family of all MUI components
You can change the font in material-ui@next library doing the following. Suppose in your <App /> which is defined like the following // Material UI import { MuiThemeProvider, createMuiTheme } from ‘material-ui/styles’; const App = () => ( <MuiThemeProvider theme={THEME}> <Provider store={store}> <Router history={appHistory} routes={Routes} /> </Provider> </MuiThemeProvider> ); ReactDOM.render(<App />, document.getElementById(‘app’)); In the theme … Read more
How to set focus to a materialUI TextField?
For React 16.8.6, you should use the inputRef property of TextField to set focus. I tried ref property but it doesn’t work. <TextField inputRef={input => input && input.focus()} /> Material-ui doc says: inputRef: Use this property to pass a ref callback to the native input component.
jss how to change opacity for a color
Material UI has a colorManipulator utility file, which includes an alpha function: import { alpha } from ‘@material-ui/core/styles/colorManipulator’; /** * Sets the absolute transparency of a color. * Any existing alpha values are overwritten. * @param {string} color – CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() * @param {number} value … Read more
What’s the right way to float right or left using the material-ui appbar with material-ui-next?
@Kyle You had it right 🙂 just add to the grid container: justify=”space-between” With your example: <AppBar position=”static”> <Toolbar> <Grid justify=”space-between” // Add it here 🙂 container spacing={24} > <Grid item> <Typography type=”title” color=”inherit”> Title </Typography> </Grid> <Grid item> <div> <HeartIcon /> <Button raised color=”accent”> Login </Button> </div> </Grid> </Grid> </Toolbar> </AppBar>