I'm using MUI version 5 and in particular I would like to use, in createTheme, the muiCssBaseLine customization part
createTheme({
palette: {
...
},
...,
MuiCssBaseline: {
styleOverrides: {
... my code
}
},
});
and apply some style to a generic class that I can apply to any mui component.
Therefore I can't be specific and use it under (for example) MuiChip, but it must be generic for any component.
MuiChip: {
// too specific
styleOverrides: {
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none'
}
}
}
I figured this might work, but it doesn't work:
MuiCssBaseline: {
styleOverrides: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
},
I also tried
MuiCssBaseline: {
styleOverrides: {
root: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
}
},
I also tried some variations:
'& .myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
'myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none',
},
but nothing works
Related
I have the following:
<div class="flex flex-row items-center justify-start flex-nowrap space-x-6">
<div>hello</div>
<div>world</div>
</div>
Now the there is no space-x-6 applied between the items. However when I try this in the Tailwind playground it works. Any ideas?
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
animation: {
blob: 'blob 7s infinite',
},
keyframes: {
blob: {
'0%': {
transform: 'translate(0px, 0px) scale(1)',
},
'33%': {
transform: 'translate(30px, -50px) scale(1.1)',
},
'66%': {
transform: 'translate(-20px, 20px) scale(0.9)',
},
'100%': {
transform: 'tranlate(0px, 0px) scale(1)',
},
},
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
mono: ['iAWriter Mono', ...defaultTheme.fontFamily.mono],
},
boxShadow: {
card: '0 0 0.5rem rgba(0, 0, 0, 0.075)',
},
typography: (theme) => ({
DEFAULT: {
css: {
whiteSpace: 'pre-wrap',
figcaption: {
textAlign: 'center',
},
strong: {
fontWeight: theme('fontWeight.medium'),
},
// Image margin is handled by `figure`
img: {
marginTop: null,
marginBottom: null,
borderRadius: theme('borderRadius.lg'),
},
blockquote: {
borderLeftWidth: '2px',
fontStyle: null,
fontWeight: theme('fontWeight.normal'),
borderColor: theme('colors.blue.600'),
},
hr: {
borderTopWidth: '2px',
maxWidth: '12rem',
marginLeft: 'auto',
marginRight: 'auto',
},
'blockquote p:first-of-type::before, blockquote p:last-of-type::after': {
content: 'unset !important',
},
a: {
color: theme('colors.blue.600'),
wordWrap: 'break-word',
fontWeight: theme('fontWeight.normal'),
textDecoration: 'none',
textUnderlineOffset: '0.2em',
'&:hover': {
textDecoration: 'underline',
},
},
'ol > li::before': {
fontFamily: theme('fontFamily.mono').join(', '),
color: theme('colors.gray.400'),
},
'ul > li::before': {
backgroundColor: theme('colors.gray.400'),
},
'.twitter-tweet': {
marginLeft: 'auto',
marginRight: 'auto',
},
code: {
fontWeight: theme('fontWeight.normal'),
background: theme('colors.gray.200'),
color: theme('colors.gray.600'),
borderRadius: theme('borderRadius.lg'),
padding: `0.125rem ${theme('padding.1')}`,
'&::before, &::after': {
content: 'unset !important',
},
},
'[data-nft] *, .opengraph *, .opengraph *:hover': {
margin: '0',
textDecoration: 'none',
borderRadius: 'unset',
},
},
},
lg: {
css: {
'ol > li, ul > li': {
marginTop: '0',
marginBottom: '0',
},
// Image margin is handled by `figure`
img: {
marginTop: null,
marginBottom: null,
},
},
},
}),
},
},
plugins: [require('#tailwindcss/typography'), require('#tailwindcss/line-clamp'), require('#tailwindcss/forms')],
};
UPDATE:
So for the space-x-# class I do a little fancyness:
export function getSpacing(spacing, direction) {
const spacingTailwindClasses = [];
if (typeof direction === 'string') {
spacingTailwindClasses.push(getTailwindSpacingClassname(spacing, direction));
} else {
spacingTailwindClasses.push(getTailwindSpacingClassname(spacing, direction.sOnly || direction.sUp));
if (direction.sUp) {
spacingTailwindClasses.push(`sm:${getTailwindSpacingClassname(spacing, direction.sUp)}`);
if (direction.sOnly) {
spacingTailwindClasses.push(`sm:${getTailwindSpacingClassname('none', direction.sOnly)}`);
}
}
}
const spacingObject = {};
const classes = spacingTailwindClasses.join(' ');
spacingObject[classes] = true;
return spacingObject;
}
I've moved to MUI 5.0 and I'm having some issues with the migration. One problem is that I can no longer change the TextField globally and locally, if it is focused (e.g borderColor: 'blue',). The Textfield component is a bit more complicated and consists of multiple input Components.
It would be nice if somebody could help me with both cases
p.s thats the documentation https://mui.com/api/outlined-input/
globally
export const TextField = {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: '1.5rem',
},
notchedOutline: {
borderColor: 'transparent',
'&.Mui-focused > fieldset': {
borderColor: 'blue',
},
},
input: {
color: palette.text.primary,
},
},
},
}
local (in the component itself not globally)
const styles = {
MuiOutlinedInput: {
root: {
borderRadius: '1.5rem',
},
notchedOutline: {
borderColor: 'transparent',
'&.Mui-focused > fieldset': {
borderColor: 'blue',
},
},
input: {
color: palette.text.primary,
},
},
}
<TextField sx={styles} />
I'm trying to create my own theme with Material-Ui v.5.4.0. And I faced with problem. I can't change TextField focused border color and width. I spend hours for research and didn't find working solution. And I started to think is it even possible to do that in theme? But it's not logical.
My current theme code:
import { createTheme } from '#mui/material/styles'
// Colors
const blue = '#5A5BD4'
const blueDark = '#4f4fd8'
// Parameters
const buttonsBorderRadius = 20
const buttonPadding = '5px 15px'
const inputBorderRadius = 10
const theme = createTheme({
components: {
// Buttons
MuiButton: {
variants: [
// Blue button
{
props: { variant: 'blueButton' },
style: {
backgroundColor: blue,
color: '#ffffff',
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding,
'&:hover': {
backgroundColor: blueDark
}
}
},
// Transparent button
{
props: { variant: 'transparentButton' },
style: {
color: blue,
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding
}
}
]
},
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: inputBorderRadius,
'& fieldset': {
border: `1px solid ${blue}`
}
},
focus: {
border: `1px solid ${blueDark}`
}
}
}
}
})
export default theme
My input code:
<TextField
size='small'
variant='outlined'
label={t('paslelbimo_data_nuo')}
type='date'
InputLabelProps={{
shrink: true
}}
fullWidth
value={publicationDateFrom}
onChange={(e) => setPublicationDateFrom(e.target.value)}
/>
Since I wasn't able to tell exactly what your desired effect was on focus vs not focused, I decided to just create a generic example, with overly dramatic styling, that may be useful to modify for your needs:
Essentially, I'm just overriding .MuiOutlinedInput-notchedOutline for both the focused an unfocused states:
const theme = createTheme({
components: {
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: {
...
"& .MuiOutlinedInput-notchedOutline": {
border: `5px solid green`,
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
border: `5px dotted red`,
},
}
},
}
}
}
});
Working example CodeSandbox: https://codesandbox.io/s/customstyles-material-demo-forked-uri26?file=/theme.js:84-531
I need separate Material-UI Collapsi Table Rows
https://material-ui.com/components/tables/#CollapsibleTable.tsx
const theme = createMuiTheme({
overrides: {
MuiTable: {
root: {
borderCollapse: "separate",
borderSpacing: "0 10px",
marginTop: "-10px"
}
},
MuiTableRow: {
root: {
borderRadius: 40,
border: "2px solid",
backgroundColor: "green",
},
},
},
});
To be something like this with spacing in between.
Best way is by setting the Theme, but Ill be glad for any advice.
It is useless to set borderRadius to MuiTableRow it is needed to use first-child last-child and MuiTableCell.
MuiTableCell: {
root: {
backgroundColor: "#fff",
paddingTop: 0,
paddingBottom: 0,
paddingLeft: "0.2rem",
paddingRight: "0.2rem",
borderBottom: 0,
overflow: "hidden",
textOverflow: "ellipsis",
"&:first-child": {
borderTopLeftRadius: "0.7rem",
borderBottomLeftRadius: "0.7rem"
},
"&:last-child": {
borderTopRightRadius: "0.7rem",
borderBottomRightRadius: "0.7rem"
}
}
},
I am trying to change the color of the all the Button's in the project by overriding the theme css. The color of the button has changed but hover color is still transparent, how can I override it ?
Is there any other way to this apart from adding a class to each of my buttons.
Also shouldn't all the variants of a button follow the css of the root?
const theme = createMuiTheme({
palette: {
primary: {
light: '#35C37D',
main: '#35C37D',
dark: '#35C37D',
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: '#35C37D',
main: '#35C37D',
// dark: will be calculated from palette.secondary.main,
contrastText: '#35C37D',
},
// error: will use the default color
},
overrides: {
MuiButton: {
// Name of the rule
root: {
// Some CSS
background: 'rgba(53, 195, 125, 100)',
borderRadius: 0,
border: 0,
colorInherit: '#fff',
color: 'white',
height: 40,
padding: '0 30px',
boxShadow: '4px 9px 26px 0 rgba(16,124,71,0.10)',
'&:hover': {
textDecoration: 'none',
backgroundColor: '#35C37D',
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: '#35C37D',
},
},
},
textPrimary: {
color: '#fff',
},
textSecondary: {
color: '#fff',
},
contained: {
color: '#fff',
},
containedPrimary: {
color: '#fff',
},
containedSecondary: {
color: '#fff',
},
raised: {
color: '#fff',
},
colorInherit: {
color: '#fff',
},
},
},
typography: {
fontFamily: 'azo-sans-web',
// The default font size of the Material Specification.
fontSize: 14, // px
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize: 16,
},
});
I figured it out.
Here is the code sandbox if anyone cares https://codesandbox.io/s/y2qyk9rn4x
Just need to add this for each variant:
outlined: {
"&:hover": {
backgroundColor: "#35C37D"
}
},