I am migrating to MUI5 and previously I was targeting landscape orientation like so:
#media screen and (orientation:landscape)
Now I want to use MUI5 breakpoints, with the sx prop. I don't see any docs how to achieve this.
Something like this:
top: { sm: "30%", "sm and (orientation:landscape)": "10px" },
Obviously doesn't work
You can use media queries inside sx as a string like this:
<Box sx={{
top: {
sm: "30%",
},
"#media screen and (orientation: landscape)": {
top: {
sm: "10px",
}
}
}}
/>
Related
I have to import a custom svg icon and use it as a button within my application
What I have been doing it is,
import high from '../img/high.svg';
const styles = theme => ({
icon: {
color: red[800],
height: '15px',
width: '15px',
cursor: 'pointer'
}
});
<IconButton><CardMedia image={high} className={classes.icon}/></IconButton>
But this does not behave like a button and I do not get the hand symbol for onClick. What is the best way to display the icon as a button?
Do a styled component that is styled s a span
interface IconProps {
color: 'blue' | 'red' | 'green';
size: string;
margin: string;
}
export const Icon = styled.span<IconProps>`
color: ${props => props.color || '#000000'};
font-size: ${props => props.size || ''};
margin: ${props => props.margin || null};
cursor: pointer;
`;
You do not have to use props like I have, but this works fine for me. spans are very useful when forcing styling on to things like text and SVGs.
Example
<Icon size="150px" color="green">
<i className="fab fa-fort-awesome-alt"/>
</Icon>
NOTE: I do use typescript. You may not need to use an interface if you dont use props. I just left it there as part of my example I have done.
I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?
I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">
You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.
To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.
It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!
i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}
Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>
I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.
I cannot find any documentation for ...theme.mixins.toolbar in the material-ui docs. What does this do? How do I change or use it?
It simply adds a minimum height to an element. It's useful when you use the AppBar with a content section below, and you want to add a spacer at the top of your content so it doesn't disappear under the AppBar, for example.
I can't find specific documentation on it, but there are examples of it being used in the Material-UI layout examples and I believe it might be created by this function.
More specifically, it's used in the Dashboard example:
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
This would result in something like:
toolbarIcon: {
display: flex;
align-items: center;
justifyContent: flex-end;
padding: 0 8px;
min-height: 64px;
}
There is global default theme. Specifically the theme.mixin.toolbar property on the object adds a min height.
theme:
breakpoints: Object
direction: "ltr"
mixins: Object
gutters: f gutters()
toolbar: Object
minHeight: 56
#media (min-width:0px) and (orientation: landscape): Object
#media (min-width:600px): Object
From the site:
Tip: you can play with the documentation theme object in your console,
as the theme variable is exposed on all the documentation pages.
Please note that the documentation site is using a custom theme.
If you want to learn more about how the theme is assembled, take a
look at material-ui/style/createMuiTheme.js, and the related imports
which createMuiTheme uses.
Here is the documentation
In my Ionic app, I have a modal view. I want its background to be a CameraPreview block but it's not working when I set the toBack property to true.
Here are my cameraOptions:
public cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: 300,
camera: 'rear',
tapPhoto: true,
previewDrag: false,
toBack: true,
alpha: 1
};
When I set toBack to false, the cameraPreview works fine but I want to access my navbar and some buttons above the preview, so I need to find what doesn't work here.
I'll be happy to provide you with more info if needed.
Thanks!
Are you sure it is not hidden behind another HTML element?
have you tried setting the background-color?
html, body, .ion-app, .ion-content {
background-color: transparent;
}
Add this to page's constructor where you're using the camera.
document.body.style.backgroundColor = "transparent !important"
I was using a dark/light theme mode in my variables.scss and everywhere I tried to applying the
html, body, .ion-app, .ion-content {
background-color: transparent;
}
or
<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}">
.custom-ion-content {
--background-color: transparent !important;
}
simply didn't work. This solved it for me.
I need to add a square frame in the middle of the viewfinder of the react native camera view. There is not information about it in the repository also. And questions there is not being answered also.
Which module you are using? react-native-camera or react-native-camera-kit?
If you using react-native-camera just put View (or Image) inside Camera component, then add styles to vertically and horizontally align this view.
Like this:
const styles = {
container: {
flex: 1,
},
camera: {
flex: 1,
// These below are most important, they center your border view in container
// ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
alignItems: "center",
justifyContent: "center"
},
borderImage: {
// Your styles for image, or custom borders
},
}
class Component extends React.Component {
...
render(){
return <View style={styles.container}>
<Camera style={styles.camera}>
<Image style={styles.borderImage} source={require("./img/qrBorder.png")} />
</Camera>
</View>;
}
}