I am new to the reac, Here I am using the material UI .
I have designed following styled component.
const StyledDefaultText = styled(Typography)<ISortBySelector>(({ fontSize }) => ({
fontSize: fontSize ? fontSize : '12px',
fontWeight: 'bold',
letterSpacing: fontSize ? '0.14px' : '0.09px',
color: '#000000'
}))
Now, Here I have added this styles still this component loads with the default styles which are there for the typography. It does not apply the styles which are there in the style component.
Can any one help me with this ?
The problem is, that your styles are loaded before the styles of the material-ui library (last one wins). You can fix it like this:
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Now, you can override Material-UI's styles. */}
</StylesProvider>
See: https://material-ui.com/guides/interoperability/#controlling-priority-%EF%B8%8F-3
Related
I'm trying to style the MUI <Paper> component, however setting the background color isn't working. Following the online tutorials I'm applying the background-color CSS property to the root element of the Paper but the color remains white while other CSS properties - in this case padding and text-align work. Can someone please tell me what I am missing?
import React from 'react';
import { Paper, Typography } from '#mui/material';
import { makeStyles } from '#mui/styles';
import AccessAlarmIcon from '#mui/icons-material/AccessAlarm';
const useStyles = makeStyles({
root: {
textAlign: 'center',
padding: 15,
backgroundColor: '#37474f',
}
});
export default function Header() {
const classes = useStyles();
return(
<Paper outlined square className={classes.root}
>
<Typography variant="h2" component="h1">
Pomodoro Cl
<AccessAlarmIcon sx={{ fontSize: 45, color: 'red' }} />
ck
</Typography>
</Paper>
)
}
First of all your attribute outlined is incorrect, it should bevariant="outlined" as per the documentation.
For the background-color not working, you will need to add !important to the property so it takes precedence over mui's default styling.
Here's a working codesandbox for you: https://codesandbox.io/s/strange-smoke-y6yhv?file=/src/App.tsx
I have to make the TextField in material-ui to be uppercase. Right now, I need to put inputProps={{ style: { textTransform: 'uppercase' } }} in everything TextField. So I have define a theme in my react app for this and I wanted something to look like this.
Please also check picture on how I do them
https://i.stack.imgur.com/lnukB.png
MuiTextField.js
export default {
root: {
textTransform: 'capitalize',
},
};
You can create a theme and override the textTransform to capitalize in every MuiInputBase class of your project, as below:
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
textTransform: "uppercase"
}
}
}
});
then wrap your project in a ThemeProvider and pass theme as a prop to the ThemeProvider:
ReactDOM.render(
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>,
document.querySelector("#root")
);
sandbox link
Using this method, you no longer need to manually add textTransform: "capitalize" to every TextField component.
I'm using styled-components to handle my styling in a react app.
Using the ThemeProvider wrapper, I'm able to get access to my theme in all of my styled components
However, i was wondering if it was possible to override just a part of the theme.
Here's a quick example:
Let's say I got the following theme:
const theme = {
color: 'red';
backgroundColor: 'blue';
}
I pass it to my app:
<ThemeProvider theme={theme}>
<MyStyledComponent>
<p>Hi</p>
<MyStyledComponent>
</ThemeProvider>
MyStyledComponent is a styled div which receives my theme:
import styled, { css } from 'styled-components'
const StyledButton = styled.button`
${props => ({
color: props.theme.color,
background-color: props.theme.backgroundColor,
})}
`
export default StyledButton
If I display this, I will have a blue div with some red text in it.
Now, if I use the following:
<ThemeProvider theme={theme}>
<MyStyledComponent theme={{color: 'green',}}>
<p>Hi</p>
<MyStyledComponent>
</ThemeProvider>
My text will turn green, BUT, no more blue background-color.
Is there a generic way to make sure that custom themes only override the properties that are found in both theme objects ?
The theme used by MyStyledComponentgets indeed totally overridden by the closest ThemeProvider defined.
Previous solution works well but to avoid to duplicate everywhere {{...theme.color, color: 'green'}} for instance, one can create a small wrapper:
const WithMainTheme = ({ theme: localTheme, children, ...props }) => {
return (
<ThemeProvider theme={{ ...theme, ...localTheme }}>
{React.cloneElement(children, props)}
</ThemeProvider>
);
};
which will allow you to write :
<WithMainTheme theme={{ color: "green" }}>
<MyStyledComponent>Hi</MyStyledComponent>
</WithMainTheme>
to get your button with color: green
See this for a running example
you can just do like normal Object in JS using spread operator and overriding the ones you want at the end.
<ThemeProvider theme={theme}>
<MyStyledComponent theme={{...theme,color: 'green'}}>
<p>Hi</p>
<MyStyledComponent>
</ThemeProvider>
I'm trying to figure out how to increase the font size of a label in my Material UI button in react.
I have a button setup:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
textTransform: "uppercase",
};
const Start = () => (
<span>
<MyButton style={style} size="large">GET STARTED</MyButton>
</span>
);
export default Start;
I can't find a way to add font-size to the styles property.
Other stack overflow posts suggest doing it as an inline style using the style property, but that overrides my const definition.
If you don't want to add fontSize: '42px' to your styles object (probably because you want to reuse this somewhere else?) you can just build a new one with the style added for your button:
const Start = () => (
<span>
<MyButton style={{...style, fontSize: '42px'}} size="large">GET STARTED</MyButton>
</span>
);
I don't know if myButton in Material is the same of RaisedButton Anyway,
Button in Material-ui it's coming like Div > Button > Div > Div > span
So if you want to styling the button first of all you need to create a CSS class like
in your css file
This for styling button
.StylingButtonExample button{
background-color: red;
}
This for styling the text inside the button
.StylingButtonExample button div div span{
color: blue;
}
in react file
import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Default" className='StylingButtonExample' />
Hope this will help you and the others
Assuming the <MyButton /> Component is, in fact, the <RaisedButton /> Component that material-ui offers, you can simply apply your label styling to the labelStyle property.
Therefore, if you wanted to change the font-size to 42px, you could simply write it as follows:
<MyButton labelStyle={{ fontSize: '42px' }}>GET STARTED</MyButton>
How to style material-ui's card components, there's not much on it? There's getMuiTheme on the github page but it names a few customize-able properties but there's nothing about color.
You can change colors globally for material-ui by overriding the theme like you say.
const myTheme = getMuiTheme(lightBaseTheme, {
palette: {
primary1Color: "red",
primary3Color: "blue",
},
});
You mention the Card component, with material-ui you can override styles on specific elements using the style or similar props. for example,
<Card style={{ backgroundColor: "red" }}>
...
</Card>