Is it possible to change the header elements order? I want the arrows to be in the right and left side of the Month-Year title, and not as it is now. The image shows exactly what I'm trying to achieve:
Codesandbox: https://codesandbox.io/s/stupefied-butterfly-rkss81?file=/src/App.js
Do you have any idea how I can achieve it?
I tried to use
PrivatePickersFadeTransitionGroup and MuiPickersCalendarHeader
class names but it didn't work.
Thank you
Try to put replace your current style with this one:
const dateTimePaperPropsStyles = {
sx: {
".MuiPickersCalendarHeader-root": {
display: "flex",
alignItems: "center",
justifyItems: "center"
},
".MuiPickersCalendarHeader-root:first-child": {
order: 0,
paddingRight: "20px",
paddingLeft: "20px"
},
".MuiPickersArrowSwitcher-root": {
display: "inline-flex"
// visibility: "hidden"
},
".MuiPickersCalendarHeader-label": {
textAlign: "center"
},
".MuiPickersArrowSwitcher-spacer": {
width: "220px"
},
".css-31ca4x-MuiPickersFadeTransitionGroup-root": {
display: "flex",
position: "absolute",
paddingLeft: "80px"
},
".css-9reuh9-MuiPickersArrowSwitcher-root": {
marginLeft: "-2px"
},
".MuiPickersArrowSwitcher-button": {
paddingRight: "7px"
}
}
};
link to sandbox
Related
I keep getting this error when i try using breakpoints, and it just happens when i add .down after breakpoints
i tried to wrap the component in a ThemeProvider but still get the same error
const useStyles = makeStyles((theme) => ({
container: {
display: 'flex',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'center',
},
},
sidebar: {
width: '30%',
[theme.breakpoints('md')]: {
width: '100%',
},
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: 25,
borderRight: '2px solid grey',
},
heading: {
fontWeight: 'bold',
marginBottom: 20,
fontFamily: 'Montserrat',
},
}))
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
I'm actually trying to override the input styling for the autocomplete component, I already overrided some of the styles on the theme, but I wasn't able to override the one for the input underline to remove it, on the devtools I found that I have to remove the borderBottom and the content styles but since this is kinda nested nothing that I tried worked:
Actual behavior
Desired behavior
This is what I need
This styles are working:
MuiAutocomplete: {
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: 14
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: 14,
height: "25px"
}
}
I tried something like this:
MuiAutocomplete: {
input: {
content: "",
borderBottom: "none"
},
inputFocused: {
content: "",
borderBottom: "none"
},
inputRoot: {
content: "",
borderBottom: "none"
},
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: 14
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: 14,
height: "25px"
}
}
Also tried using the makeStyles with inputRoot, input and inputFocused with no success:
const useStyles = makeStyles(theme => ({
inputRoot: {
"& .MuiInput-underline": {
content: "",
borderButton: "none"
},
"&:before .MuiInput-underline": {
content: "",
borderButton: "none"
},
"&.after ..MuiInput-underline": {
content: "",
borderButton: "none"
}
}
}));
Thanks in advice!
That underline is a pseudo element of the MuiInput-underline not the root input. Furthermore, a pseudo element cannot have a child so this &:before .MuiInput-underline type of syntax won't work
To solve this issue: just reference the generated root class, its descendant should be .MuiInput-underline, with pseudo element before
const useStyles = makeStyles(theme => ({
inputRoot: {
"& .MuiInput-underline:before": {
borderBottom: "none"
}
}
}));
<Autocomplete
renderInput={(params) => <TextField classes={{root: classes.inputRoot}} {...params} label="Combo box" />}
/>
Using react-native, I created a custom button as follows:
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);
But the text inside this button doesn't align vertically. Premise: I am new in react-native and I am almost sure I missing something of really stupid.
For the properties justifyContent and alignItems to work they need to be on an element with display: flex.
Whats making your text align to center is the property textAlign: 'center'
on style.text
Use display: 'flex' and flex: 1 on your style.textContainer
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
add css to your opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"
it will make your text in center
Add flex: 1 in your textContainer style :
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
Is there a shorter/inline version of doing this in react, basically applying a single css attribute conditionally?
setStyle () {
const style = {
display: 'flex',
flexDirection: 'column',
height: 485
}
if (this.state.zoom) {
style.position = 'absolute'
}
return style
}
<div ref='container' style={this.setStyle()}>
Something in this context:
style={{
display: 'flex',
flexDirection: 'column',
height: 485
position: absolute // Make this conditional
}}
Using Object.assign
let style = Object.assign({
display: 'flex'
}, this.state.zoom && { position: 'absolute' })
Using spread/rest properties
let style = {
display: 'flex',
...this.state.zoom && { position: 'absolute' }
}
Inline, inline:
<div
style={
Object.assign({
display: 'flex'
}, this.state.zoom && { position: 'absolute' })
}
/>
<div
style={{
display: 'flex',
...this.state.zoom && { position: 'absolute' }
}}
/>