I'm trying to set fontWeight: 'bold' for all of my button elements. I've made various attempts in my createTheme function:
export const muiTheme = createTheme({
typography: {
fontFamily: "poppins",
button: {
fontWeight: "bold",
color: "blue",
},
},
components: {
MuiButton: {
styleOverrides: {
text: {
fontWeight: "bold",
color: "black",
},
textPrimary: {
fontWeight: "bold",
color: "black",
},
},
},
MuiButtonBase: {
styleOverrides: {
root: {
fontWeight: "bold",
color: "black",
},
},
},
},
});
None of the above is having any effect on my code with the exception of the fontFamily
You can specify the font weight for your button in your theme in the typography object similar with the below.
import { createTheme } from '#mui/material/styles';
export const theme = createTheme({
typography: {
button: { // Here is where you can customise the button
fontSize: 16,
fontWeight: 700,
},
},
});
Then when using the Button MUI component should have the bold text
<Button variant="contained">Submit</Button>
Related
I am displaying a SettingsIcon to toggle between light and dark modes.
But I want to display the DarkModeIcon to change from light to dark and LightModeIcon to change from dark to light.
These are the themes I've used for light and dark mode. I'm not sure where to include the functionality to include a specific button in a specific mode.
const themeLight = createTheme({
palette: {
background: {
default: "#FFFFFF"
},
text: {
primary: "#000000"
},
mode:"light"
},
typography: {
body1: {
fontWeight: 600 ,
fontSize: 20,
},
body2:
{
fontWeight: 500,
fontSize: 20,
}
,
body3:
{
fontWeight: 700,
fontSize: 30,
}
},
});
const themeDark = createTheme({
palette: {
background: {
default: "#000000"
},
text: {
primary: "#ffffff"
},
mode:'dark',
},
typography: {
body1: {
fontWeight: 600 ,
fontSize: 20,
},
body2:
{
fontWeight: 500,
fontSize: 20,
},
body3:
{
fontWeight: 700,
fontSize: 30,
}
},
});
<Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}><SettingsIcon/></Button>
Any help is appreciated.
You have to wrap your App.js in ThemeProvider you can see the example at this link and then you can make a condition on toggle base like:
<ThemeProvider theme={light ? themeLight : themeDark}>
<App />
</ThemeProvider>
or you can also do like this:
import React, {useState} from 'react';
import {ThemeProvider} from '#mui/material/style'
const App = () => {
const [light, setLight] = useState(true);
const themeLight = createTheme({
palette: {
background: {
default: "#FFFFFF"
},
text: {
primary: "#000000"
},
mode:"light"
},
typography: {
body1: {
fontWeight: 600 ,
fontSize: 20,
},
body2:
{
fontWeight: 500,
fontSize: 20,
}
,
body3:
{
fontWeight: 700,
fontSize: 30,
}
},
});
const themeDark = createTheme({
palette: {
background: {
default: "#000000"
},
text: {
primary: "#ffffff"
},
mode:'dark',
},
typography: {
body1: {
fontWeight: 600 ,
fontSize: 20,
},
body2:
{
fontWeight: 500,
fontSize: 20,
},
body3:
{
fontWeight: 700,
fontSize: 30,
}
},
});
return (
<ThemeProvider theme={light ? themeLight : themeDark}>
<Button onClick={() => setLight(!light)} variant="contained" color="primary" sx={{ height: 40 }}><SettingsIcon/></Button>
</ThemeProvider>
)
}
I hope this code would be helpful. :)
If you are looking for a changing Icon:
You need to set your theme provider in higher level or in a separate component; then get access to it by useTheme hook:
import { useTheme } from "#mui/material/styles";
Inside the function:
const theme = useTheme();
And in your jsx use the conditional ternary operator to choose the Icon that you wish.
<Button
onClick={() => setLight((prev) => !prev)}
variant="contained"
color="primary"
sx={{ height: 40 }}
>
{theme.palette.mode === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
</Button>
EDIT:
Here is an Example. A Working button when theme provider is in a separate component:
import React, { useState } from "react";
import { useTheme, ThemeProvider, createTheme } from "#mui/material/styles";
import Button from "#mui/material/Button";
import DarkModeIcon from "#mui/icons-material/DarkMode";
import LightModeIcon from "#mui/icons-material/LightMode";
import Typography from "#mui/material/Typography";
const themeLight = createTheme({
palette: {
background: {
default: "#FFFFFF",
},
text: {
primary: "#000000",
},
mode: "light",
},
typography: {
body1: {
fontWeight: 600,
fontSize: 20,
},
body2: {
fontWeight: 500,
fontSize: 20,
},
body3: {
fontWeight: 700,
fontSize: 30,
},
},
});
const themeDark = createTheme({
palette: {
background: {
default: "#000000",
},
text: {
primary: "#ffffff",
},
mode: "dark",
},
typography: {
body1: {
fontWeight: 600,
fontSize: 20,
},
body2: {
fontWeight: 500,
fontSize: 20,
},
body3: {
fontWeight: 700,
fontSize: 30,
},
},
});
const MyComponent = () => {
const [light, setLight] = useState(true);
const changeTheme = () => {
setLight(!light);
console.log("Your theme has changed!");
};
return (
<ThemeProvider theme={light ? themeDark : themeLight}>
<App setTheme={changeTheme} />
</ThemeProvider>
);
};
function App(props) {
const theme = useTheme();
return (
<div className="App">
<Typography>Hello React!</Typography>
{/*Your Code */}
<Button
onClick={() => props.setTheme()}
variant="contained"
color="primary"
sx={{ height: 40 }}
>
{theme.palette.mode === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
</Button>
{/* Your Code */}
</div>
);
}
export default MyComponent;
I have created a brand new NextJs project with typescript to play a little with Chakra UI
I made some custom styles to the Default Button component but it doesn't seem to hit the small size styles or apply some base styles I have defined such as backgroundColor
Here is the code that I wrote to Customize the default Button:
NOTE: the background color does change but you have to specify both bg and background or backgroundColor properties which is kinda weird
export const Button: ComponentStyleConfig = {
baseStyle: {
borderRadius: "10px",
fontWeight: "Regular",
fontSize: "10pt",
bg: "red",
background: "red",
_focus: {
boxShadow: "none",
},
},
sizes: {
sm: {
fontSize: "8pt",
bg: "red",
background: "red",
backgroundColor: "red",
color: "white",
textColor: "white",
width: "100px",
w: "100px",
},
md: {
bg: "blue",
background: "blue",
backgroundColor: "blue",
fontSize: "10pt",
width: "200px",
},
},
variants: {
filled: {
color: "#F8F8F8",
_hover: {
backgroundColor: "#2B8CFF",
},
},
},
};
Try creating breakpoints and set them to the theme object:
// 1. Import the utilities
import { createBreakpoints } from '#chakra-ui/theme-tools';
// 2. Update the breakpoints as key-value pairs
export const breakpoints = createBreakpoints({
sm: '320px',
md: '768px',
lg: '960px',
xl: '1200px',
});
Then include it on the theme:
export default extendTheme({ breakpoints })
Recently I upgraded my material UI version from 3.9.4 to 4.11.0, I had to replace these on the theme style override:
to avoid these warnings:
But I require to put that fontSize styles wit !important since that's working on a widget which is rendered on different web pages and if I don't use the !important, then the styles are overritten by the ones of the page, Is there a way to use !important label on the typography fontSize style on the latest versions?
I tried using fontSize: `16 !important`, and fontSize: [[16], ['!important']
without success.
any help would be welcome, Thanks in advice!!!
EDIT:
On the override part it receives the styles even as a string but on the typography part, even using #Ryan Cogswell suggestion, it still throw me the same warning
const Theme = createMuiTheme({
root: {
display: 'flex',
},
palette: {
primary: {
main: '#052d4f',
},
secondary: {
main: '#2376b8',
},
},
typography: {
fontFamily: 'Arial, Helvetica, sans-serif !important',
fontSize: [16, "!important"],
},
overrides: {
MuiTypography: {
body2: {
fontFamily: 'Arial, Helvetica, sans-serif !important',
fontSize: "16px !important",
},
subtitle1: {
fontFamily: 'Arial',
fontSize: "16px !important",
},
},
MuiTablePagination: {
toolbar: {
fontSize: "14px !important",
}
},
MuiAutocomplete: {
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: "14px !important",
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: "14px !important",
height: "25px"
}
}
},
status: {
danger: 'orange',
},
});
The syntax you want is fontSize: [16, "!important"]. It also works to put the 16 within an array, but you can't put "!important" in an array.
Here's a working example:
import React from "react";
import { ThemeProvider, createMuiTheme } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
const theme = createMuiTheme({
//v5.0.0
typography: {
body2: {
fontSize: [16, "!important"]
}
},
//older versions
overrides: {
MuiTypography: {
body2: {
fontSize: [16, "!important"]
}
}
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<Typography variant="body2">Hello CodeSandbox</Typography>
</div>
</ThemeProvider>
);
}
JSS Documentation: https://cssinjs.org/jss-syntax?v=v10.4.0#modifier-important
I have this MUI codes that are applied to multiple components. I want to separate it into a single file like 'MuiSetup.js' and then import the file to the component that I am using. I've tried with as React component, however, it does not work and I have zero clues how can I do this.
// Styling TextField
const ValidationTextField = withStyles({
root: {
'& input:valid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
},
'& .MuiOutlinedInput-root': {
'&:hover fieldset': {
borderColor: '#ff9800',
},
'&.Mui-focused fieldset': {
borderColor: '#ff9800',
},
},
'& input:invalid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
backgroundColor: 'black',
},
'& input:valid:focus + fieldset': {
borderColor: '#ff9800',
borderLeftWidth: 5,
padding: '4px !important', // override inline-style
},
},
})(TextField);
//Style MUI
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
backgroundColor: 'black',
},
input: {
color: '#ff9800',
},
formBackground: {
background: 'black',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
},
form: {
width: '100hv',
height: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(0),
color: '#ff9800',
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
//Label Style
const useLabelStyles = makeStyles({
root: {
color: '#ff9800',
'&.Mui-focused': {
color: '#ff9800',
},
fontSize: '14px',
},
});
-----------
const App = () => {......}
export default App
How can I take the MUI part to the separated file?
In one of my projects I actually used createMuiTheme() in another file then added my own classes under the overrides. Then the entire app is wrapped in the ThemeProvider which you pass in your custom theme. Then you can just give the component a className.
So my MuiSetup.js equivalent file looks something like this:
import { createMuiTheme } from '#material-ui/core';
// Describe material ui theme
export const customTheme = (isDark = false) => {
return createMuiTheme({
palette: isDark
? {
common: {...},
background: {...},
primary: {...},
secondary: {...},
error: {...},
text: {...},
}
: {// Light theme stuff},
overrides: {
MuiAppBar: {...},
MuiButton: {
// Button example...
root: {
'&.CustomButton': {
margin: 0,
},
'&.OtherCustomButton': {
width: '100%',
minHeight: 'inherit',
},
'&$disabled': {
color: grey[600],
},
},
outlinedSecondary: {
'&$disabled': {
border: `1px solid ${grey[600]}`,
},
},
},
// Other mui components...
},
});
};
You'll need to read the API docs to find your inputs.
Then the ThemeProvider:
import React, { Component } from 'react';
import { ThemeProvider } from '#material-ui/core';
import { customTheme } from './MuiSetup.js';
class App extends Component {
render() {
const currentTheme = customTheme(true);
return (
<ThemeProvider theme={currentTheme}>
<h1>My app</h1>
// Usage
<Button className='CustomButton'/>
</ThemeProvider>
);
}
}
export default App;
Then from any component within the app, you can do: <Button className='CustomButton'/> as I've done above.
Not sure if this is the best way, might be a bit tricky to make multiple updates however you could do something similar in your situation and create a function in another file that returns your custom makeStyles.
HTH
Ciao, to put these customizations in a separated file is just necessary to define them in aseparated file with the key "export const ..." and then, when you want to import them, just write:
import { ValidationTextField } from "./muiCustomizations"; // supposing that you defined your customizations in a file called muiCustomizations.js
and then you can use them:
function MyComponent() {
return (
<div>
<ValidationTextField />
</div>
);
}
Here a codesandbox example.
I am trying to create a global theme with shared styles between component, so i don't need to repeat the same classes in each component, so i have a theme file:
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 80,
height: 50
},
customError: {
color: 'red',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
and in App.js
import themeFile from './theme';
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
import {MuiThemeProvider} from '#material-ui/core/styles';
const theme = createMuiTheme(themeFile);
<MuiThemeProvider theme={theme}>
<Signin />
</MuiThemeProvider>
in Signin page:
import makeStyles from '#material-ui/core/styles/makeStyles';
const useStyles = makeStyles(theme => ({
...theme
}));
const Signin = (props) => {
const classes = useStyles();
return //some form and style elements using classes
}
But i get an error TypeError: color.charAt is not a function, i don't know if i am doing it right, i tried to use withStyles but ii got the same error, what is wrong in my code?
Ciao, the problem is on color in customError. You cannot use 'red' in material ui theme. Try to replace it with #FF0000.
I found a solution for my problem, is by wrapping all properties other than pallette in an object like this
theme.js
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
spread: {
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 90,
height: 50
},
customError: {
color: '#FF0000',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
}
Signin page
const useStyles = makeStyles(theme => ({
...theme.spread
}));