Could you tell me how to overwrite the custom styles in react-easy-crop library?
<Cropper
image={headerImage}
crop={crop}
aspect={4 / 1}
onCropChange={setCrop}
onCropComplete={onCropComplete}
style={{
containerStyle: {
borderRadius: "16px",
},
cropAreaStyle: {
border: "2px solid #FFFFFF",
borderRadius: "16px",
// '& .reactEasyCrop_CropAreaGrid::after ': {
// top: '0'
// }
},
}}
classes={{ cropAreaClassName: cssStyle.reactEasyCrop_CropAreaGrid }}
/>;
I was trying to fix it with style or classes props but not handle it.
Related
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
im using the MUI Data Grid Pro, and trying removing the animations.
currently i managed to remove the open animation but when closing the closing animation remains.
for example: the column menu on closing has a delay/disappearing-effect which i try to get rid off.
Attempts:
i used the prop componentProps to set all the css related to animation to unset or none.
i used the components prop to replace the columnMenu with custom menu.
Table Column Menu Component
const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(() => ({
background: 'var(--neutral-element-dark)',
color: 'white',
borderRadius: '5px',
transition: 'none !important',
transformOrigin: 'unset !important',
}));
export const TableMenu = ({
hideMenu,
currentColumn,
color,
open,
...rest
}) => {
return (
<StyledGridColumnMenuContainer
open={open}
hideMenu={hideMenu}
currentColumn={currentColumn}
{...rest}
>
<SortGridMenuItems onClick={hideMenu} column={currentColumn} />
<GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
</StyledGridColumnMenuContainer>
);
};
MUI Table
const componentProps = {
basePopper: {
sx: {
backgroundColor: 'var(--neutral-element-dark)',
borderRadius: '5px',
fontFamily: 'Open Sans',
fontWeight: 300,
transformOrigin: 'unset !important',
'& .MuiPaper-root': {
backgroundColor: 'var(--neutral-element-dark)',
borderRadius: '5px',
transition: 'none !important',
animationDuration: '0s !important',
transitionDuration: '0s !important',
fontFamily: 'Open Sans',
fontWeight: 300,
transformOrigin: 'unset !important',
},
'& .MuiInputLabel-formControl, .MuiInput-input, .MuiButtonBase-root': {
color: 'white !important',
transitionDuration: '0s !important',
},
'& .MuiInput-underline::after': {
// transitionDuration: '0s !important',
borderColor: 'black !important',
},
},
},
columnMenu: {
transition: 'none !important',
},
};
const MUITable = (props: DataGridProProps) => {
return (
<StyledTableContainer>
<StyledTable
components={{
Pagination,
ColumnMenu: TableMenu,
}}
componentsProps={componentProps}
{...props}
/>
</StyledTableContainer>
);
};
I am trying to align text-content to the right side but there is nothing to do. I am only able to make it works when I keep textAlign property and remove all style property from my styles file. How can I fix this while keeping my property ?
Thank you:)
messageContent: {
"& #you": {
justifyContent: 'flex-end',
marginLeft: '5px',
width: 'auto',
height: 'auto',
minHeight: '40px',
maxWidth: '120px',
borderRadius: '5px',
color: 'white',
alignItems: 'center',
marginRight: '5px',
paddingRight: '5px',
paddingLeft: '5px',
backgroundColor: 'cornflowerblue',
overflowWrap: 'break-word',
wordbreak: 'break-word',
},
<div className={classes.messageContent}>
<h4 style={{textAlign: 'right'}} id={username === data.author ? "you" : "other"}>
{data.message}
</h4>
</div>
The video loader overrides the fixed bottom element, thus makes it quite unpleasant. I'am streaming the videos online and player used for it is React HLS player. What would be the best solution to prevent the overriding of loader. Following is the code reference
React HLS Player
<ReactHlsPlayer
url={video_url}
autoplay={false}
controls={true}
width="100%"
height="auto"
config={{
file: {
forceHLS: true,
}
}}
/>
Bottom Navbar Code
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%"
}
});
<GridList className={classes.gridList}>
{itemList.map((tile, index) => {
return (
<GridListTile
key={tile.icon}
style={{ height: "70px", width: "25%" }}
>
<ListItem button key={tile.text}
onClick={(tile.text == "DirectLine") ? directLineFunc : ''}
>
<NavLink
exact
to={tile.link}
key={tile.key}
activeClassName="main-nav-active"
style={{ textAlign: "center" }}
isActive={(match, location) => {
match && setNewActiveLink(index)
return match;
}}
>
<ListItemText
disableTypography
primary={
<Typography
style={{
fontSize: "10px",
fontWeight: "bold",
fontFamily: "Nunito"
}}
>
{tile.text}
</Typography>
}
/>
</NavLink>
</ListItem>
</GridListTile>
);
})}
</GridList>
See the image below
And this the codesandbox link: https://codesandbox.io/s/react-material-forked-dtx6w
Finally I was able to sort out by adding 'zIndex:999' to gridList of BottomNavbar with the following changes in useStyles as:
const useStyles = makeStyles({
root: {
width: "100%",
bottom: "0px",
position: "sticky"
},
gridList: {
flexWrap: "nowrap",
position: "fixed",
bottom: "0px",
background: "white",
border: "1px solid grey",
width: "100%",
zIndex: 999 {/* <-- Here I added this and issue solved */}
}
});
I added a style={{marginBottom: "100px"}} property in the <ReactHlsPlayer /> and it seems to fix your problem
As the title implies I keep getting this className invalid value, which I assume is from the way i use makeStyles.
Since I'm more used to using "class" and all my other materials on this page are in classes, I also tried to translate the code from https://material-ui.com/components/modal/ to class and ended up with:
const modalStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
const paperStyle = makeStyles(theme => ({
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
}));
And the jsx code:
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={modalStyle}
open={this.state.open}
onClose={this.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={this.state.open}>
<div className={paperStyle}> <----- ISSUE HERE
<ItemsTable EBELN_={this.state.clickedEBELN} />
</div>
</Fade>
</Modal>
Edit:
Tried to pass as:
const paperStyle = makeStyles(theme =>
createStyles({
paper:{
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
}
}));
And then call at className as: paperStyle.paper, the error was gone however it's not using the style at all.