I'm trying to figure out how to increase the font size of a label in my Material UI button in react.
I have a button setup:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
textTransform: "uppercase",
};
const Start = () => (
<span>
<MyButton style={style} size="large">GET STARTED</MyButton>
</span>
);
export default Start;
I can't find a way to add font-size to the styles property.
Other stack overflow posts suggest doing it as an inline style using the style property, but that overrides my const definition.
If you don't want to add fontSize: '42px' to your styles object (probably because you want to reuse this somewhere else?) you can just build a new one with the style added for your button:
const Start = () => (
<span>
<MyButton style={{...style, fontSize: '42px'}} size="large">GET STARTED</MyButton>
</span>
);
I don't know if myButton in Material is the same of RaisedButton Anyway,
Button in Material-ui it's coming like Div > Button > Div > Div > span
So if you want to styling the button first of all you need to create a CSS class like
in your css file
This for styling button
.StylingButtonExample button{
background-color: red;
}
This for styling the text inside the button
.StylingButtonExample button div div span{
color: blue;
}
in react file
import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Default" className='StylingButtonExample' />
Hope this will help you and the others
Assuming the <MyButton /> Component is, in fact, the <RaisedButton /> Component that material-ui offers, you can simply apply your label styling to the labelStyle property.
Therefore, if you wanted to change the font-size to 42px, you could simply write it as follows:
<MyButton labelStyle={{ fontSize: '42px' }}>GET STARTED</MyButton>
Related
I'm trying to override the material-ui icon inside sx prop to see my icon as rounded square. Changing the color and fontSize works, but borderRadius doesn't
import * as React from 'react';
import Badge from '#mui/material/Badge';
import Crop32OutlinedIcon from '#mui/icons-material/Crop32Outlined';
export default function SimpleBadge() {
return (
<Badge badgeContent={2} color="secondary">
<Crop32OutlinedIcon
sx={{
fontSize: 24,
color: 'blue',
borderRadius: '30%'
}}
onClick={() => console.log('Icon clicked')}
/>
</Badge>
);
}
Not sure why my borderRadius is not making the change here. Am I missing something?
You can't change the border-radius of a svg icon like Crop32OutlinedIcon.
because it's roundness is defined within it's <path> values.
You should use another icon like Crop32RoundedIcon, or some other icon from custom libraries.
But if you need more customization, You can build your own svg icon. If this the case for you, this thread can help you.
I am trying to use rgb function in Material Box. How can this be done? This is not working.
Original Code:
<Box
width={24}
style={{
background: `rgb(${appointmentReasonView.rgbColorView})`,
whiteSpace: 'pre-wrap',
}}
>
New Code Attempt:
<Box
width={24}
whiteSpace="preWrap"
background={rgb(${appointmentReasonView.rgbColorView})}
>
Error: Cannot find name 'rgb'
With styled components you can do it like this:
import { styled } from "#mui/system";
const BoxStyled = styled(Box)`
background: ${({ background }) => `rgb(${background})`};
`;
<BoxStyled
width={24}
whiteSpace="preWrap"
background={appointmentReasonView.rgbColorView} // Pass here the value from api
/>
Let me know if it helps (the value from the api should be rendered inside the rgb in the styled component. So when you inspect the lement it should show a correct css value like background: rgb(255 0 0)). Here is a working codesandbox.
I am trying to implement a hover effect in the react component using react inline-styling.
const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {
const info_window_image = {
width: "100%",
height: "168px",
background: `url(${room.pictures[0].image.large}) no-repeat`,
backgroundSize: "contain",
cursor: 'pointer'
};
return (
<div className="info_window_container">
<div style={info_window_image} />
</div>
)
};
div tag under info_window_container gets style object info_window_image .
I can successfully receive an image from API but I want to give zoom-in animation when the user hovers the image in the component.
I gave className to the div and styled in CSS file however it does not work. Styles I declared in CSS file do not render.
How can I make hover or focus effect in react-inline-styling?
I am new to the reac, Here I am using the material UI .
I have designed following styled component.
const StyledDefaultText = styled(Typography)<ISortBySelector>(({ fontSize }) => ({
fontSize: fontSize ? fontSize : '12px',
fontWeight: 'bold',
letterSpacing: fontSize ? '0.14px' : '0.09px',
color: '#000000'
}))
Now, Here I have added this styles still this component loads with the default styles which are there for the typography. It does not apply the styles which are there in the style component.
Can any one help me with this ?
The problem is, that your styles are loaded before the styles of the material-ui library (last one wins). You can fix it like this:
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Now, you can override Material-UI's styles. */}
</StylesProvider>
See: https://material-ui.com/guides/interoperability/#controlling-priority-%EF%B8%8F-3
I'm trying to learn how to use Material UI with React.
I have incorporated v1 of Material UI in my project.
Nothing about coding comes intuitively to me, so I struggle to fill the gaps between the clues left in the documentation for resources.
I know I haven't got the hang of this yet, but piecing together what others have been able to do, I have set up a button in my project, as follows:
import React from 'react';
import Button from 'material-ui/Button';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { fade } from 'material-ui/styles/colorManipulator';
const MyButton = (props) => {
return <span>
<Button {...props} />
</span>
};
export default MyButton;
I then try to use my button in a couple of places:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
// marginBottom: '30px',
};
const Start = () => (
<span>
<MyButton style={style} size="large">
GET STARTED
</MyButton>
</span>
);
export default Start;
I am trying to change the size of the button.
The Material UI documentation indicates that I should be able to toggle the size property by inserting size="large".
The example given in the documentation is:
<Button size="large" className={classes.button}>
Large
</Button>
I've tried to insert size="large" in the const style in my Start component, in the use of MyButton in the start component and in the Button component itself. None of these attempts do anything to alter the size. The text label in the button looks miniature at the moment and I can't figure out how to manipulate the size.
Can anyone see how to increase the size of the button?
Here is how I have been using it.
You need to set the root Class of the button object (or another available class, refer to the documentation for each available class by components)
import React, { Component } from "react";
import { withStyles } from "material-ui/styles";
import Button from "material-ui/Button";
const styles = theme => ({
button: {
width: "300px",
margin: "0 auto",
textTransform: "uppercase",
padding: "20px 30px",
alignSelf: "center",
},
});
class MyCustomButton extends Component {
render() {
const { classes } = this.props;
return (
<Button color="primary" raised={true} classes={{ root: classes.button }} />
);
}
}
export default withStyles(styles)(MyCustomButton);