Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles.
import React, {useState} from 'react';
import 'cg-bootstrap/core/build/cg-bootstrap-standard.css'
const Sample = () => {
const [value, setValue]= useState('');
const handleChange = (e:React.ChangeEvent<HTMLInputElement> ) => {
setValue(e.target.value);
}
return (
<Grid container justify="center" alignItems="center">
<Grid item>
<Typography>Label text</Typography>
</Grid>
<Grid item>
<TextField value={state.value} variant="contained" onChange={handleChange}/>
</Grid>
<Grid item>
<Button
variant="contained"
type="submit"
classes={{
contained: "btn btn-md btn-primary",
}}>
Submit
</Button>
</Grid>
</Grid>
)
}
cg-bootstrap-standard.css
.btn-primary {
color: #fff;
background-color: black;
border-color: black; }
.btn-primary:hover {
color: #fff;
background-color: black;
border-color: black; }
.btn-primary:focus, .btn-primary.focus {
color: #fff;
background-color: black;
border-color: black;
-webkit-box-shadow: 0 0 0 0.125rem rgba(38, 38, 38, 0.5);
box-shadow: 0 0 0 0.125rem rgba(38, 38, 38, 0.5); }
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: black;
border-color: black; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: black;
border-color: black; }
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
-webkit-box-shadow: 0 0 0 0.125rem rgba(38, 38, 38, 0.5);
box-shadow: 0 0 0 0.125rem rgba(38, 38, 38, 0.5); }
Upon inspecting the chrome console, the https://i.stack.imgur.com/kCJOw.png
https://i.stack.imgur.com/HpArG.png
https://i.stack.imgur.com/OtOaq.png
The styles of btn btn-primary were overridden and I want to ensure that their styles are the final ones applied to the button rather than the default styles of material-ui. How can I resolve this issue?