I want to create a button in the shape of a circle in react. It works for big sizes (px > 100) but looks like an ellipse for smaller pixels.
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<Button style= {{
width:'10px',
height:'10px',
borderRadius:'50%',
fontSize:'10px',
color:'#fff',
lineHeight:'50px',
textAlign:'center',
background:'#000'
}}
variant="contained" color="secondary">
{"Theme nesting"}
</Button>
</ThemeProvider>
</React.Fragment>
);
This is what is looks like:
I know the CSS is correct, so what causes this behavior?
There are other CSS styles being applied to the Button from Material-UI (mainly padding: 6px 16px; and min-width: 64px).
This will display a black circle:
<ThemeProvider theme={theme}>
<Button
style={{
width: "10px",
height: "10px",
borderRadius: "50%",
fontSize: "10px",
color: "#fff",
lineHeight: "50px",
textAlign: "center",
background: "#000",
minWidth: "unset",
padding: "0"
}}
variant="contained"
color="secondary"
>
Theme nesting
</Button>
</ThemeProvider>
That said, a better alternative to using the style property would be to use their styling API for CSS overrides (like makeStyles with theming).
Related
<Box style={{ padding: "20px" }}>
<Post post={post} setCurrentId={setCurrentId} />
</Box>
<Box sx={{ padding: "20px" }}>
<Post post={post} setCurrentId={setCurrentId} />
</Box>
React.js + Material UI
The above two examples do the same thing, one uses sx prop in material UI, the other is regular inline styling using css, so what is the point of "sx"? and should it always be used over style={{}} when using Material UI?
The sx prop is a shortcut for defining custom style that has access
to the theme
It can accept any CSS properties plus a few extra from MUI.
There are differences like :
shortHand: padding-top can be written as pt.
access to theme: If you define your theme in material UI, sx prop can directly access its properties like color.
Example from the doc :
import * as React from 'react';
import { Box, ThemeProvider, createTheme } from '#mui/system';
const theme = createTheme({
palette: {
background: {
paper: '#fff',
},
text: {
primary: '#173A5E',
secondary: '#46505A',
},
action: {
active: '#001E3C',
},
success: {
dark: '#009688',
},
},
});
export default function Example() {
return (
<ThemeProvider theme={theme}>
<Box
sx={{
bgcolor: 'background.paper',
boxShadow: 1,
borderRadius: 2,
p: 2,
minWidth: 300,
}}
>
<Box sx={{ color: 'text.secondary' }}>Sessions</Box>
<Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
98.3 K
</Box>
<Box
sx={{
color: 'success.dark',
display: 'inline',
fontWeight: 'bold',
mx: 0.5,
fontSize: 14,
}}
>
+18.77%
</Box>
<Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
vs. last week
</Box>
</Box>
</ThemeProvider>
);
}
Properties in sx object can have functions as valuse. These functions have access to theme too.
<Box sx={{ height: (theme) => theme.spacing(10) }} />
Grid properties: gap, rowGap and columnGap are available in sx.
Responsive styles: You can define properties according to the different MUI device size shorthands:
borderColor : { xs: "red", sm: "green" },
Access to child components: You can change styles of chlid components using nested styles:
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
Much more than CSS: The sx prop also supports CSS syntax including child and pseudo-selectors, media queries etc.
Eg:
<Box
sx={{
// some styles
":hover": { //psuedo-selectors
boxShadow: 6,
},
'#media print': { //media-queries
width: 300,
},
}}
>
Sources:
1.
2.
The sx props allows you to use all the mui system properties along with CSS properites.
with style={{}} aproch you add the CSS properties directly but you cannot use the mui properties in it. e.g. theme properties.
with SX props: you can set color in theme once. then use same color in all your app. then in future you want to change color you can change it in theme only once and it will apply to all the app automatically.
sx={{ color: 'primary.main' }}
with Style: but then you have to remember exact colorcode while coding your app and then in future if you decided to change you have to change everywhere in app.
style={{ color: '#00ff00' }}
also some CSS properties you can directly add to components.
e.g.
<Box height="100px" >... </Box> is same as
<Box sx={{height: '100px'}}>...</Box>
check below pages for more details.
https://mui.com/system/basics/#all-inclusive
https://mui.com/system/the-sx-prop/
so, I am having ant-design card that needs a border radius, but if I add Inline CSS, it still not working, I also tried
And here is the follow code:
<Card style = {{width: 300, margin: "20px", borderRadius: "20px"}} actions = {[<h4 style = {{ paddingTop: "6px"}} key="Name">Table Name </h4>,]}></Card>
Is there any way I can control the border radius of this card?
Adding overflow:hidden with borderRadius to the card style will fix the issue of the actions container's corners not being round.
<Card
style={{
width: 300,
margin: "20px",
borderRadius: "20px",
overflow: "hidden"
}}
actions={[
<h4 style={{ paddingTop: "6px" }} key="Name">
Table Name{" "}
</h4>
]}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card style={{ width: 300, margin: "20px", borderRadius: "20px", overflow: "hidden" }} actions={[ <h4 style={{ paddingTop: "6px" }} key="Name"> Table Name{" "} ]} > Card content Card content Card content
If you're using px within a style object you don't need to assign a unit measurement.
Just change borderRadius: "20px" to borderRadius: 20 - https://codesandbox.io/s/basic-card-antd-4-16-13-forked-jl9fv?file=/index.js
Would be good if ant-design had this in their API but it looks like they leave that up to you.
When I clicked IconButton the background color changed to an oval shape. I need to change the background color after onclick
CSS
CSS for IconButton. Changed the background color when hover. I need the same for onClick
const positionStyle = makeStyles(theme => ({
paper: {
backgroundColor: theme.palette.accent[100],
},
iconButton: {
padding: "10px",
margin: "0 5px 1px 0",
"&:hover, &.Mui-focusVisible, &:active": {
backgroundColor: theme.palette.accent[100],
},
"&$buttonDisabled": {
color: theme.palette.accent[100],
},
},
})
Material UI
<Paper className={classes.paper}>
<Box display={"flex"} height={theme.spacing(2.3)}>
<IconButton
color={"inherit"}
size={"small"}
className={classes.iconButton}
onClick={() => {
history.push("/a")
}}>
<img src={"/static/images//a.svg"} />
<Box pl={1} mt={"-4px"} maxWidth={theme.spacing(10)}>
<Typography variant={"subtitle1"} component="p">
{" Hello"}
</Typography>
</Box>
</IconButton>
</Box>
</Paper>
as i read here
Can I have an onclick effect in CSS?
the best way to do this is a checkbox trick,
other solutions are also on the page i linked
either if you have more liberty you can use JS
Have a good day
I'm using the MUI Card and CardMedia components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
I've tried placing the text div in above the CardMedia, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the CardMedia, but the v1 library doesn't seem to have anything like that.
Any know how to properly do this? Thanks in advance for any help!
Your CSS is off, you'll want to absolutely position the styles.overlay, and make sure the Card is position relative
Try something like this:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
Use the code below if you want to have an overlay like the Card in version 0. Remember to set the position of the container to relative so the absolute position of the overlay can take effect:
<Card sx={{ maxWidth: 345 }}>
<Box sx={{ position: 'relative' }}>
<CardMedia
component="img"
height="200"
image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
/>
<Box
sx={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
bgcolor: 'rgba(0, 0, 0, 0.54)',
color: 'white',
padding: '10px',
}}
>
<Typography variant="h5">Lizard</Typography>
<Typography variant="body2">Subtitle</Typography>
</Box>
</Box>
{...}
</Card>
I want to make a border image to a View , similar to border-image in the css.
How could I achieve it ?
I believe that if you use Styled Components (https://www.styled-components.com/) you can set it with CSS directly. It will be something like this:
import styled from 'styled-components/native';
const StyledView = styled.View`
border-image: <your definition here>;
`;
And then simply use it like you always do:
<StyledView>
</StyledView>
Hope it helps!
You can use ImageBackground component of react-native and wrap your view inside component by adding some padding around your nested view
<ImageBackground source={imageSource}>
<Text style={{padding:20}}> Inside </Text>
</ImageBackground>
I would go with an image that contains your border as the first element of your view and some padding on the contents of the view.
<Image
style={{
backgroundColor: '#ccc',
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center'
}}
source={{ uri: 'path/to/your/image/of/border' }}
>
<Text
style={{
backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 30,
padding: 40,
}}
>
{text}
</Text>