How to center a button in Material-UI
You can use Box element <Box textAlign=’center’> <Button variant=”contained”> My button </Button> </Box>
material-ui
How do I set multiple lines to my tooltip text for Material UI IconButton?
You can put any element you want inside of tooltip, not just text: <IconButton tooltip={<div>First Line<br />Second Line</div>} tooltipPosition=”top-center”> <FontIcon className=”material-icons”> info_outline </FontIcon> </IconButton> If you’re not sure how long the tooltip will be and you want to force line breaks, you can use set the width of the div and force word wrapping (you … Read more
How to setup Material-UI for React with Typescript?
@types/material-ui is now available, exported from its DefinitelyTyped source. npm install @types/material-ui –save-dev npm install @types/react-tap-event-plugin –save-dev Afterwards, you can do following: import * as injectTapEventPlugin from ‘react-tap-event-plugin’; // Needed for onTouchTap // Check this repo: // https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin(); Then use Material UI like this: import * as React from ‘react’; import getMuiTheme from ‘material-ui/styles/getMuiTheme’; … Read more
How to integrate Nextjs + styled-components with material-ui
Give this a try _document.js import React from ‘react’; import Document, { Head, Main, NextScript } from ‘next/document’; import { ServerStyleSheet } from ‘styled-components’ import { ServerStyleSheets } from ‘@material-ui/styles’; import theme from ‘../src/theme’; class MyDocument extends Document { static async getInitialProps (ctx) { const styledComponentsSheet = new ServerStyleSheet() const materialSheets = new ServerStyleSheets() const … Read more
Material UI and TypeScript: How to use !important?
You can just cast it. For example: left: { display: “block”, float: “left!important” as any, }, or left: { display: “block”, float: “left!important” as “left”, }, Here’s a playground example.
Can you pass custom props to Material-UI v5 `styled()` components?
Yes! The most basic example of the above would look like this in MUI v5: const Div = styled(“div”)(({ primary }) => ({ backgroundColor: primary ? “palevioletred” : “white”, color: primary ? “white” : “palevioletred” })); render ( <section> <Div>Normal</Div> <Div primary>Primary!</Div> <section> ); However, as the React docs say: The unknown-prop warning will fire … Read more
How do I change the dropdown icon in material-ui select field?
In latest Material-ui v1.4.0. there is a property IconComponent which can receive function: import Select from ‘@material-ui/core/Select’; import Person from ‘@material-ui/icons/Person’; <Select IconComponent={() => ( <Person /> )}> Also, in case the icon is not clickable, you need to add in css { pointer-events: none }
What is the alternative of makeStyles for Material UI v.5
You can still use the makeStyles utils as what you’re using, but in material v5 if you love to do it you need to install one more package @mui/styles and import { makeStyles } from ‘@mui/styles’; https://mui.com/guides/migration-v4/#mui-material-styles The makeStyles JSS utility is no longer exported from @mui/material/styles. You can use @mui/styles/makeStyles instead. Also, you need … Read more
Flutter Material3 disable appbar color change on scroll
I had same problem. In my case i had an AppBar with transparent background and a Scaffold with extendBodyBehindAppBar set to true. I tried with shadowColor and surfaceTintColor with Colors.transparent value, but the shadow was still visible. Then I noticed the scrolledUnderElevation property of AppBar. Setting it to 0.0 was the solution.
how to remove border in textfield fieldset in material ui
I was looking for a borderless text-field and this is working for me… <TextField variant=”standard” // <== changed this margin=”normal” required fullWidth id=”phoneNumber” name=”phoneNumber” autoComplete=”phoneNumber” autoFocus onChange={handlePhoneNumberChange} placeholder=”Phone Number” InputProps={{ startAdornment: <AccountCircle />, // <== adjusted this disableUnderline: true, // <== added this }} /> These 2 props seem to be the key… variant=”standard” InputProps={{ … Read more