I am trying to make a custom button component and change the style of the button using props. Below is my code:
class CustomButton extends React.Component {
render() {
return (
<TouchableOpacity
style={{height:this.props.height, borderWidth:1}}>
<Text style={{fontSize:13}}>{this.props.text}</Text>
</TouchableOpacity>
)
}
}
And I call my component like this:
<CustomButton
// custom text using props works fine
text="whatever I want to say"
// But changing custom style won't work.
height='200' or 200
/>
I am able to change the text using props however, when I apply the same to change the height it won't work. How could I change the style using props?
Try using:
<CustomButton
text="whatever you want to say"
height={200}
/>
hope it works
Not enough points to comment, can you try sending
<CustomButton
text="....."
height='200px'
/>
The reason being the style is expecting 200px as height px being one of the key metric.
There are other metrics such as px, em, vw, etc check w3 units for css
Related
The style and sx prop in MUI components pretty much do the same thing. The sx prop offers a few shorthand syntaxes, and allows you to access the theme object. But apart from that, they seem identical. When are you supposed to use one over the other?
To really understand which one to use, we need to understand what's happening under the hood. Material UI uses emotion(, or whatever styling engine you chose manually), in order to style its components. On the surface, the following two might seem to be doing the same thing:
<Box sx={{ height:'50px', width:'25px' }}/>
<div style={{ height:'50px', width:'25px' }}/>
Both render divs with the required height and width, to the DOM. But for the div, the styles are applied as inline styles, whereas the Box applies the styles in the form of a class, to the div element. The class definition itself, is stored in the head tag, which you can inspect, to see the following
This is all well and fine, as long as we're declaring the styles only once. But stuff really goes crazy when you add dynamic styling. Perhaps there is a state variable controlling the height of your div.
function CustomComponent(){
const [computedHeight,setComputedHeight]=useState();
useEffect(()=>{
window.addEventListener('resize',()=>setComputedHeight(window.innerWidth/2))
},[]);
return (
<Box sx={{ height:computedHeight, width:'25px'}}/>
<div style={{ height:computedHeight, width:'25px'}}/>
)
This is a common scenario, where some external variable(the width of the browser window for eg.) determines some property of your component. What happens is every time this state changes into a new value, MUI creates a new class, sets it as the class for the Box, and adds the definition to the <head> tag of your website, as a brand new <style> tag. So in very little time, the head tag fills up with hundreds of style tags, which is clearly undesirable.
However, in the case of your div tag, the styles are located inline. So no matter if the value changes once, or a hundred times, there is only one definition of the style, and it exists on the element itself. No need to worry about it.
EDIT 1:
MUI creates a new style tag only for a style that hasn't been used before. To illustrate, if your sx prop dynamically changes the color between 'red' and 'blue' like this,
sx={{
color: dynamicValue ? 'red' : 'blue',
}}
MUI will only create two tags(for the two possible values of color), no matter how many times you change the value of dynamicValue. MUI will just use the old style tags.
Note on Pseudo selectors:
Another thing to note is that inline styles cannot make use of pseudo elements(like ::after, or ::before), or pseudo classes(like :hover, :focus etc.), as inline styles directly affect the current element. You would have to employ a workaround like css variables in order to change the styles on pseudo elements/classes.
TLDR; Put your dynamic styles(the ones that change based on some variable) in the style prop, and put all the static styles in the sx prop
style vs sx in MUI 5
Sandbox Link
sx prop works only on MUI components like Grid, Box and so on, whereas style prop works on both MUI components and HTML like elements (JSX) such as span, article,h1 and so on.
sx prop is very helpful when compared to style prop in some cases as explained below. There might be many differences between them but these are the 3 key differences I have noticed and you might encounter them often.
Defining Media queries
Nesting styles
Making use of theme parameter (to get palette) inside sx object which we can't do in style like this - color: (theme) => theme.palette.primary.main
1. Defining Media queries
One difference between style and sx which is most popular is, defining media queries based on the Material UI theme.
How would you deal with media queries in style prop? You can use your own breakpoints and do it the way you do in CSS for sure, but you cannot use Material UI breakpoints.
This is where sx prop comes in handy where you can define media queries and other MUI provided properties to alter your styles.
Example
import { Typography, createTheme, ThemeProvider } from '#mui/material'
let theme = createTheme()
function Demo() {
const stylePropCSS = {
backgroundColor: 'lightblue',
/* theme prop is not understood here,
so this breakpoint will not work,
and text will not turn into orange */
[theme.breakpoints.down('xl')]: {
backgroundColor: 'orange',
},
}
/* theme prop is understood here.
breakpoints can be applied here based on MUI theme
*/
const sxPropCSS = {
backgroundColor: 'lightgreen',
[theme.breakpoints.up('xs')]: {
backgroundColor: 'orange',
},
}
return (
<ThemeProvider theme={theme}>
{/* style prop */}
<Typography style={stylePropCSS}>
This text will <b>NOT TURN</b> orange as
I am using style prop and MUI 'theme' is not understood
</Typography>
<br />
{/* sx prop */}
<Typography sx={sxPropCSS}>
This text will <b>TURN</b> into orange as
I am using sx prop and MUI 'theme' is understood
</Typography>
</ThemeProvider>
)
}
export default Demo
2. Nesting styles and using theme inside sx prop
You can nest the styles when using sx prop, but can't do this when using style prop.
With sx prop
<Box sx={styles.post}>
<Typography variant="h4">This is the title</Typography>
</Box>
Box is a div of background black, and I need h4 to be yellow OR MUI primary color. With this requirement, I can nest my styles when I use sx prop like this where I place h4 inside post and define sx only on Box
const styles = {
post: {
backgroundColor: 'black',
// nesting h4 inside post
h4: {
// color:'yellow' // OR
color: (theme) => theme.palette.primary.main,
/* I cannot use theme inside style object. Since I am going
to apply styles.post to sx prop,I could make use of theme
object here as an argument */
},
},
}
With style prop
<Box style={styles.post}>
<Typography variant="h4" style={style.heading}>
This is the title
</Typography>
</Box>
const styles = {
post: {
backgroundColor: 'black',
},
// I can't nest the heading inside post, so defining it outside post
heading: {
color: 'yellow',
// color: (theme) => theme.palette.primary.main, // THIS WON'T WORK with style prop
},
}
Why isn't styling inside the Image component in NextJS not allowing me to manipulate my image.
Am I missing something?
<Image className={styles.bg}
style={{ transform: `translateY(${offset * 0.5}px)` }}
src="/../public/bg.jpg"
// width={2049}
// height={2049}
// objectFit="cover"
layout="fill"
quality={100}
/>
If Next.js version is less than 12.1.1, this will not work. Onwards there is support for canonical style prop. With the style prop in support for props like layout, objectFit, and objectPosition is removed in Next.js 13.
Other properties on the component will be passed to the underlying img element with the exception of the following:
style. Use className instead.
NextJs v12.1.1 added the style prop to next/image.
next 12 does not support styling the image tag directly, but the way to go about this is to put the image tag inside a div container, which we will apply the styling to, here is a sample
<div className={style.styling}>
<Image src={image.url} width={100} height={100} />
</div>
I am rendering an <AppBar> with a large z-index value (using withStyles, it has a value of theme.zIndex.modal + 2 which computes to 1202).
The reason for this is to ensure my <Drawer> component remains hidden behind the <AppBar> when it's opened (i.e. a clipped drawer).
However when I render a <Select> component within my appbar, the 'dropdown' div does not have a large enough z-index value to be displayed, and so it ends up being hidden behind the appbar.
A basic example is as follows:
let Test = ({classes}) => (
<AppBar className={classes.appbar} elevation={2} position='relative'>
<Toolbar>
<Select>
<MenuItem>{"Item 1"}</MenuItem>
<MenuItem>{"Item 2"}</MenuItem>
</Select>
</Toolbar>
</AppBar>
)
const styles = theme => ({
appbar: {
zIndex: theme.zIndex.modal + 2,
margin: 0
}
})
Test = withStyles(styles)(Test);
Overriding the z-index on any of <Select>'s exposed classes does not seem to fix my problem. How can I ensure <Select> appears in front of <AppBar>?
You can use the style attribute on all components in Material-UI
<Select style={{zIndex: X}}>
...
</Select>
Cf: https://v0.material-ui.com/#/components/select-field
For details about all the available styles attributes.
You can use PaperProps on Drawer component to adjust zindex instead of changing Select component's zindex.
Using this example: https://ant.design/components/layout/#components-layout-demo-side
How can I add a custom image or icon instead of the default icons.
I tried:
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src={require('image.png')} />
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
But that does not look good or does not respect the collapsed behaviour
I tried several different ways of creating custom icons, and the one that was easiest and worked best was to use the component property of the antd Icon component. Just give it a functional component that returns whatever image you want to use:
<Icon component={() => (<img src="/image.svg" />)} />
This seems to work well within menu items and submenus, except that the icons don't line up perfectly with the menu text like the built-in icons do. I ended up adding transform: translateY(-3px) to the CSS to compensate for this (might depend on the image you use).
On the other hand, the official solution (for SVG images only) is to use the #svgr/webpack plugin to turn the SVG file into a component. This may have some advantages as far as layout and coloring (antd icons seem to prefer actual <svg> elements over <img> elements with SVG image files). But I'm not sure because I didn't go to the trouble of setting it up.
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
I hope this might be work.
you need handle separate css file and put it this code
.ant-menu-item{background-image: url("theme5.jpg");}
icon:<img src="/static/icons/BH_tainan.svg" height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,
need float:"left" in your style
A bit of an old question, but I thought I'd post another solution here for those not wanting to go the webpack route like the docs recommend. You can simply create your own SVG component and then pass it to the antd icon component.
Something like this
// Icons.tsx
export const MyIcon = () => {
return (
<svg>
// svg path data
</svg>
);
};
Then
// app.tsx
import Icon from "#ant-design/icons";
import { MyIcon } from "./Icons";
const App = () => {
return (
<Icon component={MyIcon} />
)
}
I fiddled with this a little bit in a sandbox, and it seems to work just fine. I was using antd 4.23.3 for reference. Didn't test it a huge amount so there might be some style adjusting needed, not sure.
I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.
<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>
CSS:
.buttonText {
font-size: 63px;
}
The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.
The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the style property directly on the component. It would look something like this:
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the style object as well.
http://www.material-ui.com/#/components/raised-button
Use the labelStyle prop to override the inline style for the element
http://www.material-ui.com/#/components/raised-button
<RaisedButton
label="Button"
labelStyle={{ fontSize: '63px'}}
/>
<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>
It needs to be added with lineHeight as a style prop for even spacing:
<RaisedButton style={{ lineHeight: "100px" }} label="lineHeight in style" />
Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/
Cheers
You can use classes props to override the default css styles applied to every material-ui component. You can find out more in this youtube video:
https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo
Use font-size unit as Percent (%) or em. For e.g font-size:12%