I have a react app with Material UI. I know how to set the theme's default background color on body. However, I want to set a background image instead. How can I accomplish this?
const theme = createMuiTheme({
palette: {
background: {
default: ???
}
}
});
If you are using CssBaseline you can apply a global style through theme overrides and set the backgroundImage for body e.g. https://codesandbox.io/s/v30yq681ql. You should be able to set the global style through any component that you are using.
Related
Im implementing a mui theme through createStyles via `
import { createTheme, ThemeProvider } from '#mui/material/styles'
which looks something like
createTheme({
...other stuff
borders: { ... }
})
The theme gets created fine, and when using useTheme in a child component im able to see the custom borders object. However when logging the same from within the styled emotion component, it removes the non standard keys:
const t = useTheme()
console.log('t===',t)
const S = styled('div')`
backgroud-color: ${props => {
console.log('inside----', props.theme)
return 'red'
}}`
t=== logs fine with the borders
inside---- logs with the theme but without borders attached
Ive tried importing styled from #mui/material instead of #emotion/styled and both do the same.
Ive also created a theme.d.ts for defining the custom theme via module augmentation but that also doesnt assis
declare module '#mui/material/styles' {
interface CustomTheme {
borders?: {
lrg: any;
};
}
interface Theme extends CustomTheme {}
interface ThemeOptions extends CustomTheme {}
}
does anyone have any ideas?
Using the 'styled' MUI component, with theme, a TextField component has been created.
When the TextField has no data (ie, empty), below styles were used to render the background as a custom-grey color:
'& .MuiInputBase-root': {
backgroundColor: theme.palette.background.grey01,
height: '40px'
},
This backgroundColor needs to change (to white) when data has been entered into the TextField. Not just 'on focus', but if data is present (ie, TextField is not-empty) the white-background must persist; however, if user deletes/removes data (ie, TextField is emptied by user), backgroundColor needs to go back to custom-grey.
From Chrome Inspect, was able to track down the relevant classes (including .Mui-focused):
MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary Mui-Focused MuiInputBase-formControl css-1byr8j2-MuiInputBase-root-MuiOutlinedInput-root
Have reviewed MUI documentation at https://mui.com/customization/how-to-customize/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet but unable to determine a way to know when value is populated / empty.
UPDATE:
I had overlooked the easiest and most elegant solution.
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
background-color: ${({theme, value}) =>
!value && theme.palette.background.grey01};
}
`
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color of a picture was yellow.See Image
This figure shows the new background color after using the pseudo-class. It is red now.
See Image
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
test(){
console.log("message");
}
For Details,check Pseudo-classes for quick apps
I am new to the web development, and I am trying to use material-ui. I saw some demo codes use withStyle and some others use withTheme. Are there any differences between them? Thanks a lot!
I think the accepted answer is not well-explained, to be more clear:
1) withStyles also provides the theme object when creating css styles; the signature of creating function is like:
const styles = theme => ({
root: {
maxWidth: 600,
},
tabs: {
borderTopWidth: 1,
borderTopStyle: 'solid',
borderColor: theme.palette.divider,
width: '100%',
},
});
As one can see theme and everything inside it like theme.palette can be accessed. Official documentation and examples are everywhere so I just randomly picked this one. (Press this button to show the source codes: "< >")
2) The purpose of withTheme is to inject theme into props, so it could also be accessed inside component functions like render, sometimes it's useful. Official documentation here.
withStyles overrides the style of a specific component.
withTheme overrides the style of a specific component while also giving you access to the theme so that your style can be based on the theme's colors, typography, spacing, etc.
It can be confusing because you have to create a new component using these higher-order functions:
const MyCustomBottom = withStyles(styles)(Button);
const MyCustomThemeBasedButton = withTheme(theme)(Button);
I changed the header to a darker color using this:
<ion-nav-bar class="bar-royal">
When I run it on ios, the status bar text (time, carrier, battery, etc) at the top is black and difficult to see on the dark background. How do I make this text white?
With the plugin statusbar and ngCordova is pretty simple:
var app = angular.module('ionicApp', ['ionic', 'ngCordova']);
app.run(function($cordovaStatusbar) {
$cordovaStatusbar.overlaysWebView(true);
$cordovaStatusBar.style(1); //Light
$cordovaStatusBar.style(2); //Black, transulcent
$cordovaStatusBar.style(3); //Black, opaque
});
Take a look to the full article here:
http://learn.ionicframework.com/formulas/customizing-the-status-bar/
UPDATE - Without ngCordova:
Default Ionic project comes with the statusbar plugin installed. If you have this statement inside you run probably your project already have:
if(window.StatusBar) {
StatusBar.styleDefault();
}
So the code become:
var app = angular.module('ionicApp', ['ionic']);
app.run(function() {
if(window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.style(1); //Light
StatusBar.style(2); //Black, transulcent
StatusBar.style(3); //Black, opaque
}
});
UPDATE II
With a new version 2.x of the cordova-plugin-statusbar the StatusBar.style() method was substituted with these new methods:
StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();
Check the plugin's documentation
In ionic 4 with angular app we can change the status bar color as well as its text color by following code how to change status bar's text color
this.platform.ready().then(() => {
this.splashScreen.hide();
this.statusBar.overlaysWebView(true);
this.statusBar.styleDefault();
});