I wanna edit the width and height of my material-ui fab button. I have tried to change it by using classname and applying styles. The width changes but my problem is that the height doesn't.
This is the css code:
const dashboardStyles = makeStyles(theme => ({
infoButton: {
height: '20px',
width: '20px'
}
}));
It changes the width but doesn't change the height. Thanks for any help.
You can use material-ui makeStyles:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Fab from "#material-ui/core/Fab";
import AddIcon from "#material-ui/icons/Add";
const useStyles = makeStyles(theme => ({
fab: {
width: "80px",
height: "80px"
}
}));
export default function FloatingActionButton() {
const classes = useStyles();
return (
<Fab className={classes.fab}>
<AddIcon />
</Fab>
);
}
Related
I am trying to set new breakpoints for my container width in MUI System. It works without typescript, but in my typescript project, it does not recognize my custom breakpoints and only recognizes the default breakpoints (xs, sm, md, lg, and xl). I followed the suggested BreakpointOverrides suggested here
```
import React from 'react';
import Container from '#mui/system/Container';
import { createTheme, ThemeProvider } from '#mui/system';
declare module '#mui/system' {
interface BreakpointOverrides {
// Your custom breakpoints
laptop: true;
tablet: true;
mobile: true;
desktop: true;
xldesktop: true;
// Remove default breakpoints
xs: false;
sm: false;
md: false;
lg: false;
xl: false;
}
}
const theme = createTheme({
breakpoints: {
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
//#ts-ignore
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
},
},
});
const HeroHomepage = ({}) => {
return (
<ThemeProvider theme={theme}>
<Container
sx={{
bgcolor: {
mobile: 'green',
tablet: 'blue',
laptop: 'orange',
desktop: 'yellow',
},
width: 200,
height: 500,
}}
>
<div>hello world</div>
</Container>
</ThemeProvider>
);
};
```
When I do this, no color at all is applied to the container, as it does not recognize the custom breakpoints.
Try to use latest version of MUI. It seems to be recently fixed, according to this discussion https://github.com/mui/material-ui/issues/26369.
In my case it helped: no TS errors now and breakpoints works.
I have an AccountCircleIcon Material UI icon and I want to increase the size, I've tried several things:
import AccountCircleIcon from '#material-ui/icons/AccountCircle';
import {withStyles} from '#material-ui/styles';
const StyledIcon = withStyles({
root: {
fontSize: '50rem',
},
})(AccountCircleIcon);
const login = () => {
return (
<div><StyledIcon /></div>
);
};
import AccountCircleIcon from '#material-ui/icons/AccountCircle';
import {makeStyles} from '#material-ui/styles';
const useStyles = makeStyles({
root: {
fontSize: '50rem',
},
});
const login = () => {
const classes = useStyles();
return (
<div><AccountCircleIcon classes={{root: classes.root}} /></div>
);
};
import AccountCircleIcon from '#material-ui/icons/AccountCircle';
import {makeStyles} from '#material-ui/styles';
const useStyles = makeStyles({
avatarIcon: {
fontSize: '50rem',
},
});
const login = () => {
const classes = useStyles();
return (
<div><AccountCircleIcon className={classes.avatarIcon} /></div>
);
};
But each time the default icon styling overrides the added styling:
I missed the StyledEngineProvider https://mui.com/guides/interoperability/ wrapping that around your app assures the custom css is injected first:
import * as React from 'react';
import { StyledEngineProvider } from '#mui/material/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>
);
}
https://codesandbox.io/s/laughing-alex-nyszr?file=/src/Demo.tsx
First of all, sorry for my English.
I tried to setup correctly MUI v4 for Next.js but I’ve always styles flicker.
I’ve :
Next: 10.0.5
Material-ui/core: 4.9.14
And I use Material-UI's styling solution.
No solution found on the web can’t correct this behavior for now.
In my _app.js :
import { useEffect } from 'react';
import { ThemeProvider } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import { AuthProvider } from '#lib/useAuth';
import DefaultLayout from '#layouts/DefaultLayout';
import theme from '#assets/styles/jss/theme';
import '#assets/styles/scss/toastify.scss';
const MyApp = ({ Component, pageProps }) => {
const Layout = Component.Layout || DefaultLayout;
useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<ThemeProvider theme={theme}>
<AuthProvider>
<CssBaseline />
<Layout>
<Component {...pageProps}> </Component>
</Layout>
</AuthProvider>
</ThemeProvider>
);
};
export default MyApp;
In my _document.js :
import React from 'react';
import Document, {
Html,
Head,
Main,
NextScript,
} from 'next/document';
import { ServerStyleSheets } from '#material-ui/core/styles';
class MyDocument extends Document {
render() {
return (
<Html lang="fr">
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
export default MyDocument;
For example, in navbar component I’m doing :
import { makeStyles } from '#material-ui/core/styles';
import styles from '#assets/styles/jss/components/navbarStyle';
const useStyles = makeStyles(styles, { name: 'MuiCustomNavbar' });
const Navbar = () => {
const classes = useStyles();
[…]
}
But i’v always styles flicker in production when I reload page.
Anyone can help me please ?
Thanks !
Is there something I can use in/with IconButton to define a label below the icon?
Maybe something similar to BottomNavigationAction but without it having to be inside of a BottomNavigation.
You can add your label as a direct child of the IconButton (sibling of the Icon itself), and override the IconButton-label style to have flexDirection: column
import React from 'react';
import {IconButton} from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import SaveIcon from '#material-ui/icons/Save';
const useStyles = makeStyles(theme => ({
iconButtonLabel: {
display: 'flex',
flexDirection: 'column',
},
}));
export default function IconButtonWithLabel() {
const classes = useStyles();
return (
<IconButton classes={{label: classes.iconButtonLabel}}>
<SaveIcon/>
<div>
hello
</div>
</IconButton>
);
}
According to docs, material-ui supports persistant drawer.
But my expected behaviour is a clipped persistant drawer like the photo.
My Sidebar component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Face from 'material-ui-icons/Face';
import Person from 'material-ui-icons/Person';
import Assignment from 'material-ui-icons/Assignment';
import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage } from 'react-intl';
import styles from '../../../../style/components/global/Sidebar.scss';
const cx = require('classnames/bind').bind(styles);
const rootStyles = theme => ({
list: {
width: 250,
flex: 'initial',
},
drawer: {
top: 30,
},
});
class UndockedDrawer extends Component {
render() {
const { classes } = this.props;
const sidebarListItems = (
<div>
<NavLink
to="/users"
className={cx('noStyle')}
>
<ListItem button>
<ListItemIcon>
<Person />
</ListItemIcon>
<ListItemText primary={<FormattedMessage id="user" />} />
</ListItem>
</NavLink>
</div>
);
const sidebarList = (
<div>
<List className={classes.list}>
{sidebarListItems}
</List>
</div>
);
return (
<div>
<Drawer
open={this.props.open}
onRequestClose={this.props.onRequestClose}
onClick={this.props.onRequestClose()}
type="permanent">
{sidebarList}
</Drawer>
</div>
);
}
}
export default withStyles(rootStyles)(UndockedDrawer);
So far, I've tried to make top property as much as AppBar's height but this behaviour wasn't what I needed.
Is there any way to achieve this?
You need to provide the right styles for the AppBar. Taking the example from the docs you provided:
Instead of:
const styles = theme => ({
...
appBar: {
position: 'absolute',
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
...
});
Use:
const styles = theme => ({
...
appBar: {
position: 'absolute',
width: '100%',
zIndex: '1400',
},
...
});
Why zIndex is 1400? It's just an arbitrary number that is higher than the zIndex of the Drawer, which is 1300.