I have a grid of column 3,6,3 & I have also given a grid spacing of 3.
For lg, md screen devices sizes it looks okay i.e spacing between grid. But when I reduce the screen size spacing between Grid remains the same which does not look okay
What I want is spacing between Grid for lg & md devices to be 3 but for sm & xs devices to be 0 so I don't see any padding around Grid.
I have inspected the DOM & have seen padding to be 12px for Grid spacing 3.
I have tried this
const theme = createMuiTheme({
..., // Other default things
overrides: {
MuiGrid: {
'spacing-xs-3': {
'& > $item': {
padding: 'none',
},
},
},
},
});
This does the job of removing padding which is none obviously but for all device sizes but I want this padding to be removed only for smaller size devices.
I used this inside the component like this
const useStyles = makeStyles(theme => ({
...,
overrides: { // This part , I tried both with and without overrides key
MuiGrid: {
'spacing-xs-3': {
'& > $item': {
[theme.breakpoints.down('md')]: {
padding: 'none',
}
},
},
},
},
}));
None really seems to work, Where am I making mistake?
You just need to use $root element instead of $item, like this
MuiGrid: {
'spacing-xs-3': {
'& > $root': {
[Your styles go here]
},
},
},
Related
When I check the official Tailwind CSS documentation, it says that
Use w-screen to make an element span the entire width of the viewport.
I mean, w-screen is ok when I try to implement
width: 100vw;
But what should I do when I try to implement
width: 90vw;
height: 90vh;
The right approach to take depends on whether the values are going to be reused.
Arbitrary Values
If there's one specific place that you need a value such as 90vw rather than it being repeated, opt for an arbitrary value. Example:
<div class="w-[90vw] h-[90vh]"></div>
Classes for those styles will be generated automatically.
Extending Your Config
For styles that are likely to be repeated or which should be part of your design system, extend your Tailwind config instead:
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'screen/90': '90vh',
},
width: {
'screen/90': '90vw',
}
}
}
}
Use:
<div class="w-screen/90 h-screen/90"></div>
I find useful to create a plugin for this case
Change Tailwind config into this (add plugin and default values)
const plugin = require('tailwindcss/plugin')
// create default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});
module.exports = {
// ...
plugins: [
plugin(function ({matchUtilities, theme}) {
matchUtilities(
{
'w-screen': width => ({
width: `${width}vw`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
),
matchUtilities(
{
'h-screen': height => ({
height: `${height}vh`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
)
})
],
}
It will allow you to use w-screen or h-screen utility with any vw or vh values from 0 to 95 with step 5 (0,5,10...95). w-screen with no values will be 100vw (as current behaviour)
<div class="w-screen h-screen-35">
Default width screen is still working
</div>
<div class="w-screen-50 h-screen-[15]">
50vw width, 15vh from JIT
No need to set h-screen-[15vh] as we already know we're working with vh units
</div>
In your case it will be w-screen-90 h-screen-90
You may extend config for reusable classes with screenSize key
module.exports = {
theme: {
extend: {
screenSize: {
33: 33 // just an example
}
},
},
}
Usage
<div class="w-screen-[22] h-screen-33">
33vh from user config, 22vw from JIT
</div>
DEMO
You can use the Tailwind CSS utility classes to set the width and height of an element to a specific viewport width or height.
For example, to set the width of an element to 90vw, you can use the class w-90. Similarly, to set the height of an element to 90vh, you can use the class h-90.
So, in your case, you can use the following classes:
w-90
h-90
How can we use custom percentage on padding in Tailwind CSS?
My config:
theme: {
extend: {
spacing: {
'80\%': '80%', // p-80% - doesn't work
}
},
},
We can achieve that in the old way with the plain CSS:
.p-80\% {
padding: 80%;
}
But ideally, we can do it with Tailwind too.
Any ideas?
While the other answers do provide an answer, this can be frustrating if you only need to use the custom value once. I found this answer when trying to solve such an issue, so for those who find this after me, tailwind now supports arbitrary values.
You can use them by appending square brackets containing a CSS value (e.g. [80%]) to a prefix such as p- for padding or mr- for margin-right.
<div class="p-[80%]">
Hello world!
</div>
You don't need to escape the percent sign for Tailwind, it will take care of that. Here's a play example https://play.tailwindcss.com/CYR6JOXYyz?file=config
theme: {
extend: {
spacing: {
'80%': '80%', // p-80% - should work
}
},
},
The class Tailwind will create is .p-80\% for the above config.
I found that using spacing to customize more than padding, margin, width, and height all at once
Code
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
padding: {
'p-80': '80%',
},
// Build your palette here
colors: {
'black': '#393939',
}
}
}
}
Markup
TailWindCSS Dev
I'm trying really hard to change the css for the .MuiDataGrid-window in MatierialUi DataGrid.
Therefore I was following css rules from https://material-ui.com/api/data-grid/
I tried it within createMuiTheme for root it was working fine, but not for window. I also tried a lot of different cominations like MuiDataGrid-window or only 'MuiDataGrid-window' directly under overrides, but nothing worked..
export const theme = createMuiTheme({
overrides: {
MuiDataGrid: {
root: {
backgroundColor: 'red',
},
window: {
width: '120%',
},
},
}
});
Next try was a styled DataGrid component, which also didn't work out.
Both didn't work. A styled component would be my prefered way!
const StyledDataGrid = styled(DataGrid)({
MuiDataGrid: {
root: {
backgroundColor: 'green',
},
window: {
width: '120%',
}
}
});
Maybe I'm completely on the wrong way.. But how to style the CSS attributes in MUI's API like .MuiDataGrid-mainGridContainer, .MuiDataGrid-overlay, .MuiDataGrid-columnsContainer, .MuiDataGrid-colCellWrapper etc.
Thanks a lot and maybe it is helpful for somebody else :)
If you check the styles applied, window class element has two selectors associated (multiple classes):
.MuiDataGrid-root .MuiDataGrid-window
To apply the styles in children elements, such as, window in grid root, you need to select both of them:
MuiDataGrid: {
root: {
backgroundColor: 'red',
'& .MuiDataGrid-window': {
backgroundColor: 'green'
}
}
}
In documentation the grid component have just one rule name: root
I'm creating a skills chart in a React component, where each bar starts with a short width and then it expands to a specified width after 0.5 second. The width is related to the skill level, defined in the following array:
const skills = [
{ skillName: 'JavaScript', level: 10, color: 'bca538' },
{ skillName: 'HTML', level: 9, color: 'af4336' },
{ skillName: 'CSS', level: 9, color: '2f81b7' },
]
The chart is represented in the following code:
<div className="chart__bars">
{skills.map((skill, index) => {
const { skillName, level, color } = skill
const { scale } = this.state
return (
<div
className={'chart__bars__item'}
key={skillName}
style={{
background: `#${color}`,
height: `${(100 / skills.length) * (index + 1)}%`,
width: `${scale ? level * 10 : 30}%`,
zIndex: skills.length - index,
}}
>
<h4
style={{
opacity: `${scale ? 1 : 0}`,
}}
>
{skillName}
</h4>
</div>
)
})}
</div>
After the component is mounted, it triggers a state change after 0.5 second, which should then expand each bar (logic for this is inside the style property in the code above). Here's the initial state:
state = {
scale: false,
}
And here's where I change it:
componentDidMount() {
setInterval(() => {
this.setState({ scale: true })
}, 500)
}
It works fine on the browser, but not on mobile. Using the devtools I can see the width being updated, but it won't expand. If I uncheck the tick box for the width, and then check it again, then the width expands (which should happen automatically).
The working example is on my website: https://marcelcruz.io.
Any thoughts would be much appreciated!
Thanks.
I'm trying to provide CSS overrides for MuiTab to increase the font-size.
Using the documentation about CSS overrides on material-ui I've managed to increase font size for most elements, however I got stuck at elements that use media queries as they produce more specific CSS rules than the ones I provide with my overrides.
theme.ts :
import { createMuiTheme } from '#material-ui/core';
const fontSizeStyle = {
fontSize: '1rem',
};
const fontFamilyStyle = {
fontFamily: '"Ubuntu", sans-serif'
};
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
...fontFamilyStyle,
...fontSizeStyle,
},
label: fontSizeStyle,
},
}
});
export default theme;
This produces following css rules applied to a MuiTab:
The rule is generated by the following file:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js
[theme.breakpoints.up('md')]: {
fontSize: theme.typography.pxToRem(13),
},
Does anyone have an example how to override this media query using createMuiTheme function? I don't have the breakpoints, so perhaps I need to specify breakpoints as well to be able to use them in my overrides
Kind regards
I solved it by specifying it in the following way:
MuiTab: {
root: {
minWidth: 0,
'#media (min-width: 0px)': {
minWidth: 0
}
}
}
Specify it as follows
let theme = createMuiTheme({});
theme = {
...theme,
overrides: {
MuiTab: {
root: {
[theme.breakpoints.up("xs")]: {
minHeight: 10
}
}
}
}
}
export default theme;
theme.breakpoints exposes four helper methods to create CSS media queries:
theme.breakpoints.up(key)
theme.breakpoints.down(key)
theme.breakpoints.only(key)
theme.breakpoints.between(start, end)
Where each key is a breakpoint and matches with a fixed screen width.
Allowed key values are xs|sm|md|lg|xl
See material-ui docs for more info
I also faced the same issue. I read the docs about Breakpoints and find a way for this situation but I find it kinda ugly as I have to apply the overridden styles in each Tab using classes property.
Note: I don't know the solution for this problem using createMuiTheme function
Apply the style to the breakpoints style. In this case,
const styles = theme => ({
mediaFont:{
[theme.breakpoints.up('md')]: {
fontSize:fontSizeStyle.fontSize,
},
},
});
Apply the above style to TabLabel
<Tab label="Item One" classes={{label:classes.mediaFont}} />
CSS has a mechanism for forcing a less specific rule to override a more specific one: !important.
const fontSizeStyle = {
fontSize: '1rem !important',
};