I'm using Mui5 with SC and I have issues with overriding theme base values.
I have base theme like this for base mui components, for example:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: "1.75rem",
color: "red",
}
}
}
}
});
And now I like to extend the base button with custom colors like this with SC:
const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
return {
fontFamily: theme.xxx,
color: "green"
};
});
This is not working, only the theme defaults are applied.
What's wrong with the implementation or what I'm missing?
BR,
Are you using any other package such as material-ui.
Are all your packages also up to date and have these installed:
"#emotion/css": "^11.9.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.9.1",
"#mui/styled-engine": "^5.8.7",
"#mui/styles": "^5.9.1",
Related
I am writing plugin to add custom styles in TailwindCSS, but I am a bit confused with values of theme(). I don't know how to see all the theme values to apply my base styles. How do I know where it is?
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents, addUtilities, theme }) {
addBase({
'h1': {
fontSize: theme('fontSize.2xl'), // need to see more fontSize and properties, where I can see it?
},
'h2': {
fontSize: theme('fontSize.xl'),
},
})
}
]
}
how can I reproduce the following scss using a plugin?
.large-title {
font-family: $font-family-2;
#apply leading-none;
color: $large-title-color;
#apply uppercase;
#apply text-xl;
// I don't know how to add these in the plugin
#apply sm:text-2xl;
#apply md:text-3xl;
#apply lg:text-4xl;
#apply xl:text-5xl;
}
in my config file, I currently have:
module.exports = {
[...]
plugins: [
require('#tailwindcss/forms'),
plugin(function({ addBase, config }) {
addBase({
'.large-title': {
fontFamily: [config('theme.fontFamily.family-2')],
fontSize: config('theme.fontSize.xl'),
lineHeight: config('theme.lineHeight.none'),
color: config('theme.colors.primary.900'),
textTransform: 'uppercase',
},
})
})
],
}
The only thing missing is I can't find out how to add the responsive size changes from the class in the plugin.
One way to add #media queries to a class in Tailwind's CSS-in-JS syntax is nesting:
addBase({
'.large-title': {
'#media (min-width: 500px)': {
fontSize: theme('fontSize.xl'),
}
},
})
Additionally, user's breakpoints can be accessed using the theme() function:
const sm = theme('screens.sm', {})
Combining these two snippets you could:
const sm = theme('screens.sm', {})
addBase({
'.large-title': {
`#media (min-width: ${sm})`: {
fontSize: theme('fontSize.xl'),
}
},
})
One caveat to be aware of in case you're building this plugin for public use is that a user may entirely change their theme.screens config. If a user removes the theme.screens.sm key from their configurations, for example, the snippet above would no longer work.
I'm trying to overwrite the default CSS of an external component which isn't developed in Material-UI or my project. In styled-components, I can just take the root classes and replace them with my custom CSS. How do I do the same with Material-UI-React?
.ace-tm .ace_variable {
color : red
}
Suppose I've to replace those two classes with the new color property, how do I do it in Material styles?
This is what I've tried with no luck!
const Styles = {
" & ace-tm": {
"& ace_variable": {
color: red,
fontSize: "16px"
},
}
};
I'm using withStyles to later inject them in the components.
I just found this and thought I'd share the solution for posterity:
const GlobalCss = withStyles((theme) => ({
'#global': {
'.ace-tm .ace_variable': {
color: 'red',
},
},
}))(() => null)
const SomeComponent = () => {
return (
<>
<GlobalCss />
<h1>Hey Jude</h1>
<SomeComponentWhoseCSSWillBeModified />
</>
}
Read more on this here: https://material-ui.com/styles/advanced/#global-css
I am trying to customize the colors in withAuthenticator HOC aws-amplifier login screen.
I followed:
https://aws-amplify.github.io/docs/js/authentication#using-components-in-react
and also read:
https://medium.com/#coryschimmoeller/customizing-the-authentication-experience-of-amplifys-withauthenticator-e6f2089ff469
import { AmplifyTheme } from 'aws-amplify-react';
const myTheme = {
...AmplifyTheme,
BackgroundColor: { color: 'blue',backgroundColor: 'blue' },
button: { color: 'blue',backgroundColor: 'blue' },
amazonSignInButton: { color: 'blue',backgroundColor: 'blue' },
signInButton: { backgroundColor: 'blue' , color: 'blue'}
};
...
//export default App;
export default withAuthenticator(App, myTheme );
amplify still renders the AWS default look and feel. I doesn't make any difference what I put in myTheme, looks like as if it is ignored completely.
Thanks for any feedback in advance.
You need to adress the different elements like so:
import { AmplifyTheme } from "aws-amplify-react";
const authTheme = {
...AmplifyTheme,
sectionHeader:{
...AmplifyTheme.sectionHeader,
color:"red",
},
formSection: {
...AmplifyTheme.formSection,
backgroundColor: "green",
},
sectionFooter: {
...AmplifyTheme.sectionFooter,
backgroundColor: "purple"
},
button: {
...AmplifyTheme.button,
backgroundColor: "blue"
}
}
export default withAuthenticator(App, { theme: authTheme });
If you are not sure about the names of the different elements you can look them up in the developer console of your browser. It´s a bit tedious but i haven´t found a documentation so far
Taken from the documentation:
Web
const MyTheme = {
signInButtonIcon: { 'display': 'none' },
googleSignInButton: { 'backgroundColor': 'red', 'borderColor': 'red' }
}
<Authenticator theme={MyTheme} />
Web components reference
React Native
import { AmplifyTheme } from 'aws-amplify-react-native';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });
<Authenticator theme={MyTheme} />
React Native components reference
Since the question is about withAuthenticator specifically, the previous examples apply to that too:
export default withAuthenticator(App, false, [], null, MyTheme);
I am using React with TypeScript and Material UI. So I have the the following layout
<MuiThemeProvider theme={muiTheme}>
<My Component/>
</MuiThemeProvider>
And then in my component I have something similar to
let styles: any = ({ palette }: any) => ({
root: {
marginTop: 10
}
});
export default withStyles(styles)(MyComponent);
What would be the preferred way to go if I want to share the root class among multiple components? Can I extend Material UI theme when I am creating it using createMuiTheme?
Any advise will be highly appreciated
Here is how I define my custom theme in Material-ui
const Theme = createMuiTheme({
typography: {
fontSize: 18,
},
palette: {
primary: {
light: '#40bbbf',
main: '#032B43',
dark: '#0b777b',
},
},
customCommonClass: {
textAlign: center,
},
})
Theme.overrides = {
MuiListItemIcon: {
root: {
marginRight: 0,
},
},
MuiListItem: {
dense: {
paddingTop: '4px',
paddingBottom: '4px',
},
},
}
There are 3 parts within this creation:
the first I will define some defaults of my theme (for the fontSize, and palette color as an example)
The second I create some global class customCommonClass that I can use in all styled components down the road (your question)
I override some class of the material ui components.
hope this can help