Where can I change the default Text Color in the Material UI Theme?
Setting primary, secondary and error works
const styles = { a: 'red', b: 'green', ... };
createMuiTheme({
palette: {
primary: {
light: styles.a,
main: styles.b,
dark: styles.c,
contrastText: styles.d
},
secondary: {
light: styles.aa,
main: styles.bb,
dark: styles.cc,
contrastText: styles.dd
},
error: {
light: styles.aaa,
main: styles.bbb,
dark: styles.ccc,
contrastText: styles.ddd,
},
...,
}
...,
}
Now, when I use a <Typography /> component, I can do this
<Typography
color='primary'
variant='h6'>
Foo
</Typography>
That gives it the color I defined in palette.primary.main.
However, when I leave the color prop empty
<Typography
variant='h6'>
Foo
</Typography>
I gives the a greyish color. Where is that color defined? Where can I define additional text colors despited primary, secondary and error?
Simplay adding another key to palette is not working...
createMuiTheme({
palette: {
...,
text1: {
light: styles.t,
main: styles.tt,
dark: styles.ttt,
contrastText: styles.tttt,
},
...
}
...
}
It is done like this.
createMuiTheme({
palette: {
...,
text: {
primary: styles.t,
secondary: styles.tt,
disabled: styles.ttt,
hint: styles.tttt,
},
...
}
...
}
Make sure that primary is a color code, not an object.
The colors can be used like so
<Typography
color='textPrimary'> // or 'textSecondary', 'hint', 'disabled'
Foo Bar
</Typography>
If you want to change the default color of the "material-ui" Typography components, you can use this kind of code.
import { createMuiTheme, ThemeProvider, Typography } from '#material-ui/core';
const MuiTheme = createMuiTheme({
typography: {
allVariants: {
color: 'red'
}
}
});
const App = () => {
return (
<ThemeProvider theme={MuiTheme}>
<Typography>Hi there</Typography>
</ThemeProvider>
);
};
export default App;
This will change the Typography components' default color to whatever you would like to be (for this example, it makes the default color red), of course it will be changed by using "color" prop in the Typography component.
Related
When I try to use an sx prop inside a ThemeProvider tag I am getting the following error:
breakpoints.map is not a function
here is the code:
import { responsiveFontSizes, createTheme } from
'#mui/material/styles';
import { Box, ThemeProvider } from '#mui/material';
import styled from '#emotion/styled';
let theme = createTheme({
palette: {
type: 'dark',
primary: {
main: '#3dde7f',
},
secondary: {
main: '#c83737',
},
background: {
default: '#121212',
paper: '#1a1a1a',
},
},
});
theme = responsiveFontSizes(theme);
export default function Main(props) {
const {accountsStore} = useStores();
return (
<ThemeProvider theme={theme}>
<Box sx={{ gridArea: "menu", paddingTop: "40px", marginTop:
"50px", maxWidth: "300px" }}>
<SideNav accountsStore={accountsStore}/>
</Box>
</ThemeProvider>
);
}
I am able to get it to work with styled components. Any help would greatly appreciated.
What can i do to make my makestyles classes more important than default material ui style?
That's my code:
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { makeStyles, createStyles } from '#mui/styles';
const customTheme = createTheme({
palette: {
primary:{
main: '#303030',
},
},
components:{
MuiButton:{
styleOverrides: {
root: {
'&:focus': {
background: "#f00",
},
'&:hover': {
background: "#f00",
},
'&::after': {
content: '"xd"',
color: 'blue',
},
},
contained:{
borderRadius:'50%',
},
},
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed #000000`,
},
},
],
},
},
});
const useStyles = makeStyles((theme) =>
//I tried without createStyles too, no change
createStyles({
root: {
},
differentButton:{
backgroundColor: 'green',
fontSize: '30px',
opacity: '80%',
},
//tak sie propsy przekazuje
foo: (props) => ({
backgroundColor: props.backgroundColor,
}),
}),
);
function App() {
const classes = useStyles();
return (
<>
<CssBaseline/>
<Button className={classes.differentButton}>Different</Button>
<RemoveButton variant="contained">Remove Button</RemoveButton>
<ThemeProvider theme={customTheme}>
<Button className={classes.differentButton}>Different</Button>
</ThemeProvider>
</>
);
}
Its overrided by something (default material ui style i think so)
Does it means that with customizing material ui components i can't use makeStyles? I know that i can do that with styled() too but makeStyles way seems better to me.
Ps. I dont want to use !important everywhere hah
There are several solutions.
You can use withStyles, mui v4
withStyles
Use emotion style by styled
styled
Also you can use !important in material-ui
I'm trying to apply a custom color to a Button using createMuiTheme and ThemeProvider, and it works when using palette primary and secondary, but when i try to use any other, like "info", it doesnt work:
Anyone know what im doing wrong or any other way to go about this?
primary and secondary attributes are the only ones recognized in palette object.
You are trying to create a custom variant.
Creating a custom variant is supported in the latest version(Above v5) of material-UI.
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'twitter' },
style: {
backgroundColor: '#00acee',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#007cad",
},
},
},
{
props: { variant: 'facebook' },
style: {
backgroundColor: '#3b5998',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#314c85",
},
},
},
],
},
},
});
export default theme
UI
<Grid item>
<Button variant="facebook" startIcon={<FacebookIcon />}>Facebook</Button>
</Grid>
<Grid item>
<Button variant="twitter" startIcon={<TwitterIcon />}>Twitter</Button>
</Grid>
Here is the link that will help
https://github.com/mui-org/material-ui/issues/15573
https://github.com/mui-org/material-ui/issues/15573#issuecomment-724114107
I'm having a bit of difficulties with the theming in Material-UI when it comes to coloring elements. Some elements automatically choose 'theme.palette.main.dark'. I want to know how to force them not to.
For instance the TextField and SpeedDial components automatically choose the dark property from the theme. I've tried to just remove the dark property, but than the TextField is black and the text inside the TextField is unreadable.
My theme file is configured as following:
import {createMuiTheme} from "#material-ui/core";
import {green, indigo, red} from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: indigo.A200,
dark: green.A100
},
white: {
text: '#fff',
},
secondary: {
main: red.A100,
dark: green.A100,
}
}
});
export default theme;
I expect the TextField and SpeedDial to choose the primary color but the actual outcome is that they choose the dark property, probably because it would otherwise interfere with people not being able to see the component properly, but I want to custom choose the colors. I haven't been able to find an explanation on how to change the color for the underline and the float in the TextField component.
https://codesandbox.io/s/material-demo-o52c8
Below is an example with many obnoxious colors on the different aspects of the TextField.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
});
const useLabelStyles = makeStyles({
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
});
function App() {
const classes = useStyles();
const labelClasses = useLabelStyles();
return (
<div className="App">
<TextField
InputProps={{ classes: classes }}
InputLabelProps={{ classes: labelClasses }}
label="label"
defaultValue="text"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here's the same look, but controlled via the theme:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiInput: {
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
},
MuiInputLabel: {
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<TextField label="label" defaultValue="text" />
</div>
</ThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Related answers:
How do I custom style the underline of Material-UI without using theme?
How can I change the label size of a material ui TextField?
Change InputLabel color of a Select component when clicked/focused
Change outline for OutlinedInput with React material-ui
I'm fairly new to React Native, but I have a simple working app with three scenes. I was previously using Navigator but it felt laggy and was excited to try out React Navigation (as in https://reactnavigation.org/). After implementing React Navigation, my background color switched from white to grey, and what was grey to white. This is a strange and shouldn't be related. However I didn't change my styles. I only implemented the new navigation and the colors changed. When I revert back to Navigator my colors return. I'm using StackNavigator. Has anyone else encountered this strange phenomenon?
Or maybe a better question is : how do I style my header and background color in React Navigation's StackNavigator?
To style the header in React Navigation use a header object inside the navigationOptions object:
static navigationOptions = {
header: {
titleStyle: {
/* this only styles the title/text (font, color etc.) */
},
style: {
/* this will style the header, but does NOT change the text */
},
tintColor: {
/* this will color your back and forward arrows or left and right icons */
}
}
}
For styling the backgroundColor, you just need to set the backgroundColor in your app otherwise you'll get the default color.
UPDATE!! As of May 2017 beta9 the navigationOptions are now flat
You can read about the breaking change here
You need to remove the object keys from the header object. Also, notice they have been renamed.
static navigationOptions = {
title: 'some string title',
headerTitleStyle: {
/* */
},
headerStyle: {
/* */
},
headerTintColor: {
/* */
},
}
Here is an example of what I am using to change the card background color and Header background and font color.
/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/
//your new background color
let myNewBackgroundColor = 'teal';
const AppNavigator = StackNavigator({
SomeLoginScreen: {
screen: SomeLoginScreen
}
}, {
headerMode: 'screen',
cardStyle: {backgroundColor: myNewBackgroundColor
}
});
//add the new color to the style property
class App extends React.Component {
render() {
return (
<AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/>
);
}
}
/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions
*/
/*
its not clear in the docs but the tintColor
changes the color of the text title in the
header while a new style object changes the
background color.
*/
//your new text color
let myNewTextColor = 'forestgreen';
//your new header background color
let myNewHeaderBackgroundColor = 'pink';
const AppNavigator = StackNavigator({
SomeLoginScreen: {
screen: SomeLoginScreen,
navigationOptions: {
title: 'Register',
header: {
tintColor: myNewTextColor,
style: {
backgroundColor: myNewHeaderBackgroundColor
}
},
}
}
}, {
headerMode: 'screen',
cardStyle:{backgroundColor:'red'
}
});
Use below code to create custom navigation header
static navigationOptions = {
title: 'Home',
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18,
},
};
Try this code.
static navigationOptions = {
title: 'KindleJoy - Kids Learning Center',
headerTintColor: '#ffffff',
/*headerBackground: (
<Image
style={StyleSheet.absoluteFill}
source={require('./imgs/yr_logo.png')}
/>
),*/
headerStyle: {
backgroundColor: '#1d7110',
borderBottomColor: 'black',
borderBottomWidth: 0,
},
headerTitleStyle: {
fontSize: 18,
}
};
I think none of the above answers worked for me in react-navigation 5 so, I made it mine own solution and share it with you
Just changed background of your theme in react-navigation 5 and you are good to go.
import React from 'react';
import { NavigationContainer, DefaultTheme } from '#react-navigation/native';
const MainNavigator = () => {
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#FFF',
},
};
return (
<NavigationContainer theme={MyTheme}>
...
</NavigationContainer>
);
};
export default MainNavigator;
https://reactnavigation.org/docs/themes/
Ok nothing worked for me, so I managed to figure out my own solution
static navigationOptions = ({ navigation, screenProps }) => ({
headerLeft: (
<NavBackButton onPress={() => { navigation.goBack(); }} />
),headerStyle: {
backgroundColor: CLColors.MAIN_BLUE
},
headerTitle: <Text style={[CLStyles.H6MEDIUM_WHITE, {marginLeft:8}]}>Profile</Text>
, footer: null,
});
headerTitle will do the magic to place a custom Text element here.
headerStyle will do the magic to change the background color of your navbar.
headerLeft will help you to customize your back button.
In stack navigator you can change it with contentStyle.backgroundColor like below syntax
<Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>
note: #f6f6f6f is colour code of red colour you can change it as per your requirement, below is extra code snippets in case
const Stack = createNativeStackNavigator();
export default function App() {
return (
<>
<StatusBar style='auto' />
<NavigationContainer>
<Stack.Navigator screenOptions={{ contentStyle: {backgroundColor: '#f6f6f6f'}}}>
<Stack.Screen name="List Page" component={ListPage} />
<Stack.Screen name="List Page 2" component={ListPage} />
</Stack.Navigator>
</NavigationContainer>
</>
);
}