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 })
Related
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
Trying to update globally the height property for all the toolbars I use, but it doesn't seem to work. The references I'm using are https://mui.com/customization/theme-components/ and https://mui.com/api/toolbar/. From there I have this:
const myTheme = createTheme({
components: {
MuiToolbar: {
root: {
height: '50px',
minHeight: '50px',
maxHeight: '50px'
}
}
}
})
Also tried:
const myTheme = createTheme({
components: {
'MuiToolbar-root': {
height: '50px',
minHeight: '50px',
maxHeight: '50px'
}
}
})
Also not working. Both times it continues showing the default theme toolbar. What am I missing here?
You need to use styleOverrides key to change styles injected by MUI into the DOM.
So, something like this should work :
const myTheme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
regular: {
height: "12px",
width: "20px",
height: "32px",
minHeight: "32px",
"#media (min-width: 600px)": {
minHeight: "48px",
},
backgroundColor: "#ffff00",
color: "#000000",
},
},
},
},
});
I am trying to change the colour of my Buttons nested inside a ButtonGroup. I want to change the text colour as well as the "|" lines in between the buttons. I have tried overriding every class that I could find using the developer's console through styled but none of them had any effect.
const SortOptionButtonGroup = styled(ButtonGroup)({
'& .MuiButtonGroup-root': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-text': { color: pageColor, borderColor: pageColor },
});
const SortOptionButton = styled(Button)({
'& .MuiButton-root': { color: pageColor, borderColor: pageColor },
'& .MuiButton-text': { color: pageColor, borderColor: pageColor },
'& .MuiButton-textPrimary': { color: pageColor, borderColor: pageColor },
'& .MuiButton-sizeMedium': { color: pageColor, borderColor: pageColor },
'& .MuiButton-textSizeMedium': { color: pageColor, borderColor: pageColor },
'& .MuiButtonBase-root': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-grouped': { color: pageColor, borderRight: pageColor },
'& .MuiButtonGroup-groupedHorizontal ': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedText': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedTextHorizontal': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedTextPrimary': { color: pageColor, borderColor: pageColor },
});
I am using v5.4.1.
You want to do it like so:
use .MuiButtonGroup-grouped to control the style the ButtonGroup children, regardless of the variant. If you'd like to be more specific, you can use a class based on the current variant instead. For example,
.MuiButtonGroup-groupedText when variant is text.
use not(:last-of-type) pseudo class to customize style of all but last buttons borders (i.e the buttonGroup dividers).
The final code look like this:
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
import { styled } from "#mui/material/styles";
const StyledButtonGroup = styled(ButtonGroup)({
// change the text color for all buttons
'& .MuiButtonGroup-grouped': {
color: "green",
},
// change the button group dividers color
'& .MuiButtonGroup-grouped:not(:last-of-type)': {
borderColor: "red"
}
});
export default function VariantButtonGroup() {
return (
<StyledButtonGroup variant="text">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</StyledButtonGroup>
);
}
You can see a demo of it in this codesandbox.
You can change inner button styles (color, background-color, etc) directly through styled:
const StyledButton = styled(Button)({
color: '#ff0000',
backgroundColor: '#00ff00'
})
The divider line between buttons is implemented as buttons' border, so to change it, you should style button border inside ButtonGroup. You can do something like this:
const StyledButtonGroup = styled(ButtonGroup)({
"& .MuiButtonGroup-grouped:not(:last-of-type)": {
borderColor: "#ebc200"
}
});
Here's an example sandbox
I cannot change font-color in TextField Material UI component. I try to do it using createTheme() and when I add class '& .MuiOutlinedInput-input' in code sandbox font-color changes as it should, but when I apply it to the app code it doesn't work.
Will appreciate Your support.
Below is the implementation:
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
backgroundColor: `#EDEDED`,
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
'&.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
},
'& .MuiOutlinedInput-input': {
padding: '10px',
fontSize: '13px',
color: 'red',
},
},
},
},
},
});
<ThemeProvider theme={theme}>
<InputForm
name={'phoneNumber'}
id={'phoneNumber'}
label={phoneNumberLabelTxt}
disabled={isDisabledInputs}
/>
</ThemeProvider>
Your code worked in my local repo. however if its not working for you then try below code which also worked for me.
'&.MuiOutlinedInput-root': { // no space between & and .
padding: '10px',
fontSize: '13px',
color: 'red',
},
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