How do you change the default 16px browser font-size to 10px using Material UI? As I understand it, MUI uses Nomralize.css under the hood?
In the my theme file I have
export default createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
html: {
padding: '0',
},
},
},
},
typography: {
htmlFontSize: 10,
fontSize: 8,
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
fontWeight: 400,
},
})
but I don't know if this is right..
My app is also wrapped with CssBaseLine
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>
</Provider>,
document.getElementById('root'),
Is this correct? I remember the 62.5% trick and trying to accomplish something similar I guess
Your code is just fine and for future reference use use React DevTools to verify if your properties really apply or not (after React DevTools setup look for the ThemeProvider props).
Related
It seems that overriding the CSSBaseline won't work.
I'm building a website using Next.js and the MUI library, but I can't seem to get the font customization working. I tried to follow the guide and none of it works. I don't know if it has something to do with the CssBaseline theme.
_app.tsx
import { createTheme, ThemeProvider } from '#mui/material/styles'
import CssBaseline from '#mui/material/CssBaseline'
const theme = createTheme({
typography: {
fontFamily: [
'"IBM Plex Sans"',
].join(','),
},
components: {
MuiCssBaseline: {
styleOverrides: {
"#font-face": {
fontFamily: "IBM Plex Sans",
src: `url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap')`
},
}
}
}
});
export default ({Component, pageProps}:any) => <><CssBaseline /><ThemeProvider theme={theme}><Component {...pageProps} /></ThemeProvider></>
_document.tsx
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<style>#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');</style>
</Head>
<body><Main /><NextScript /></body>
</Html>
)
}
SOLVED: Had to put the baseline element inside the theme provider. Duh!
SOLVED: Had to put the baseline element inside the theme provider. Duh!
What is the correct way to extend build-in components of MaterialUI v5? What I'd like to do:
Style the build-in component
Make a wrapper on top of my styled component with additional components
The current code:
import {Box, Link, LinkProps} from '#mui/material';
import {styled} from '#mui/material/styles';
const StyledLink = styled(Link)<LinkProps>({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: '#6b7688',
fontWeight: 500,
fontSize: '12.8px',
textTransform: 'uppercase',
textDecoration: 'none',
'&:hover, &.Mui-focusVisible': {
color: '#313bac',
transition: 'all 0.3s ease-in-out',
// LinkHoverElement
'& .MuiBox-root': {
backgroundColor: '#313bac',
},
},
});
const LinkHoverElement = styled(Box)({
width: '5px',
height: '5px',
marginBottom: '5px',
borderRadius: '50%',
backgroundColor: 'transparent',
});
const MenuLink = ({children, ...restProps}: LinkProps) => {
return (
<StyledLink {...restProps}>
<LinkHoverElement />
{children}
</StyledLink>
);
};
export default MenuLink;
It works, I also may use all props ('sx' prop as well)
<MenuLink
sx={{mx: '1rem'}}
key={page}
href={`#${page}`}>
{page}
</MenuLink>
seems like a 'god object', I've read documentation and uses this articles:
Reusable component
styled()
but haven't found an complicated example and feel like the code above isn't a best practice
The codesandbox example
I think it's just a simple task in HTML/CSS but in Material-UI, how to set different font size for TextField in Material-UI?
The following code does not work:
<TextField
name="keyword"
InputProps={{
style: styles.textField
}}
placeholder="Type here"
/>
const styles = {
textField: {
fontSize: 16,
'#media (min-width: 576px)': {
fontSize: 20
},
'#media (min-width: 768px)': {
fontSize: 22
}
}
};
to change the font size of TextField with media-query, target the root input class by using the InputProps prop, and select the input class. classes provided in InputProps is applied to the input element.
<TextField
InputProps={{ classes: { input: classes.textFieldStyle} }}
variant="outlined"
/>
Now style the textFeildStyle class inside the makeStyles and for adding #media-queries use the theme.breakpoints method. It is explained here.
const useStyles = makeStyles((theme) => ({
[theme.breakpoints.down("lg")]: {
textFieldStyle: {
color: "yellow",
fontSize: 19
}
},
[theme.breakpoints.down("md")]: {
textFieldStyle: {
color: "green",
fontSize: 17
}
},
[theme.breakpoints.down("sm")]: {
textFieldStyle: {
color: "blue",
fontSize: 15
}
}
}));
Working sandbox demo:
I'm trying to override the style for the selected tab, but some of the overrides don't work. I'm doing,
const StyledTab = withStyles({
root: {
color: '#0071bc',
fontWeight: '600'
},
selected: {
color: '#fff' <--- doesn't work
}
})(Tab)
which, to me, looks like what the documentation is telling me to do. If I set the background on selected, the background color changes, but the font color does not.
Am I doing something wrong with the override?
Edit
Using !important forces it, but I don't want to use !important if I can avoid it.
I could come up with a solution using overriding CSS using withStyles,
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
classes={{ indicator: classes.tabsIndicator }}
>
<Tab
label="Search"
icon={<PhoneIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
</Tabs>
If we take this as the code you can use this styles to override,
const styles = theme => ({
tabsIndicator: {
backgroundColor: "red"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium
},
"&:focus": {
color: "red"
}
},
tabSelected: {}
});
find that tabSelected is an empty value but &$tabSelected overrides the values
here is a working sample - https://codesandbox.io/s/882o65xlyl
hope this will help you.
Im trying to apply css to a Typography element but it does nothing; I have tried the same css on another div element and it works but it simply does not apply to Typography.
This is my Typography element:
<Typography
variant="title"
classname={classes.detailTitle}
>
Details:
</Typography>
And this is my css:
detailTitle: {
textDecoration: 'underline'
}
Any clues?
You have a slight typo in your Typography html, it needs to say className where you have classname. This is react specific, for more info take a look here https://reactjs.org/docs/dom-elements.html
You can use Material UI component's classes property to set its style.
Check this page https://material-ui.com/api/typography/#css
Example:
const useStyles = makeStyles((theme) => ({
h3: {
fontSize: '48px',
fontWeight: '600'
},
})
)
const TextComp = (props) => {
const classes = useStyles()
return (
<Typography
variant='h3' component='h3'
classes={{ h3: internalClasses.h3 }}
>
{header}
</Typography>
)
}