Hello, I recently started using Material UI and I'm facing some challenges in styling the components. Right now, I'm working on a sign-in page and trying to position the Submit button all the way to the bottom right corner. Any help or advice would be highly appreciated because it seems like the button is inheriting styles from unexpected sources. I've attempted adding
textAlign: 'right'
to buttonStyle but that didn't yield the desired result. I also tried adding
text-align: right;
to my .form-button CSS. The only noticeable change occurred when I removed the .App from Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
In App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
My main aim is to avoid inline styling as much as possible and keep everything within my style sheet. However, if it's too complicated or not achievable, I'll resort to inline styling (similar to how I did with the background-color).