How to combine makeStyle classes from parent and child component? - reactjs

How can I pass makeStyle classes from parent component to child component and combine them with the makeStyle classes in the child component? E.g. as below adding the breakpoint hiding to the child component style.
Example child component:
import React from "react"
import { Button } from "#material-ui/core"
import { makeStyles } from "#material-ui/core/styles"
const useStyles = makeStyles(theme => ({
button: {
background: "#000",
color: "white",
//lots of other css here so we dont want to repeat it in the parent component
},
}))
export default function PrimaryButton(props) {
const classes = useStyles()
const { children, fullWidth = false } = props
return (
<Button
fullWidth={fullWidth}
className={classes.button}
variant="contained"
>
{children}
</Button>
)
}
Example parent component:
import React from "react"
import { PrimaryButton } from "components/PrimaryButton"
import { makeStyles } from "#material-ui/core/styles"
const useStyles = makeStyles(theme => ({
primaryButton: {
display: "inline-block",
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
}))
export default function PrimaryButton(props) {
const classes = useStyles()
return (
<PrimaryButton
className={classes.primaryButton}
>
Button text
</PrimaryButton>
)
}

clsx is used internally within Material-UI and is a convenient utility for combining multiple class names. In your child component, you can grab className from the props and then use className={clsx(className, classes.button)} in the Button it renders:
import React from "react";
import { Button } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import clsx from "clsx";
const useStyles = makeStyles(theme => ({
button: {
background: "#000",
color: "white"
}
}));
export default function PrimaryButton(props) {
const classes = useStyles();
const { children, className, fullWidth = false } = props;
return (
<Button
fullWidth={fullWidth}
className={clsx(className, classes.button)}
variant="contained"
>
{children}
</Button>
);
}

Related

Passing useState setter function to child component for a click event but getting setState is not a function

I am using Material UI Drawer for sidebar and passing the setReplyDrawer to child ReplyReview so that I can close it from the child with a click event but getting error that setReplyDrawer is not a function.
replyDrawer state is used for opening and close a modal.
<Button onClick={()=>setReplyDrawer(false)}>Back</Button>
can anyone please let me know what am i doing wrong or how to correct it?
import { Avatar, Box, Button, Container, CssBaseline, Divider, Rating, Select, Stack, SwipeableDrawer } from '#mui/material'
import React, { useState } from 'react'
import { AiFillCaretDown } from "react-icons/ai";
import MouseOverPopover from '../common/MouseOverPopover';
import SelectOptions from '../common/SelectOptions';
import ReplyReview from './ReplyReview';
import { BsChat } from "react-icons/bs";
const ReviewList = ({name,comment,createTime,reply,star}) => {
const [action, setAction] = useState('')
const [showMore, setShowMore] = useState(false)
const [replyDrawer, setReplyDrawer] = useState(false)
return (
<div className='review-list-container'>
{/* some code here*/}
<div className='review-buttons'>
{/* Reply Button */}
<MouseOverPopover
mainContent={
<Button size='medium' onClick={()=>setReplyDrawer(true)} variant="outlined">
<BsChat style={{fontSize:'27px'}} />
</Button>}
popoverContent={`Add Tyson Hinton as a contact to start messaging`}
/>
<div>
<SwipeableDrawer
sx={{
width: drawerWidth,
zIndex: (theme) => theme.zIndex.drawer + 1,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
padding:'20px'
}}
anchor={'right'}
open={replyDrawer}
onClose={()=>setReplyDrawer(false)}
onOpen={()=>setReplyDrawer(true)}
>
<ReplyReview name={name} replyDrawer={replyDrawer} setReplyDrawer={setReplyDrawer} />
</SwipeableDrawer>
</div>
</div>
</div>
)
}
export default ReviewList
ReplyReview.jsx
import { Button, Drawer, IconButton, InputBase, Paper, SwipeableDrawer } from '#mui/material'
import React, { useState } from 'react'
import { BsSearch } from "react-icons/bs";
import { AiOutlinePlusCircle } from "react-icons/ai";
import { BiArrowBack } from "react-icons/bi";
import './ReplyReview.css'
const ReplyReview = (name,replyDrawer,setReplyDrawer,first,setFirst) => {
const [buttonClicked, setButtonClicked] = useState(false)
const drawerWidth = 500;
console.log(replyDrawer,setReplyDrawer)
return (
<div className='reply-review-container'>
<header>
<Button onClick={()=>setReplyDrawer(false)}><BiArrowBack/></Button>
<strong>Start messaging {name.name}</strong>
</header>
</div>
)
}
export default ReplyReview
In ReplyReview the button is used to close the modal
You forgot to deconstruct the props
const ReplyReview = (name,replyDrawer,setReplyDrawer,first,setFirst) => {
to
const ReplyReview = ({name,replyDrawer,setReplyDrawer,first,setFirst}) => {
"name.name" should now be just "name"
Maybe you don't call that function in the Correct way
function ReplayReview(props){
// here props an object so you need to pull up any value from that object
return <Button onClick={()=>props.setReplyDrawer(false)}>Back</Button>
}
or
function ReplayReview({setReplayDrawer})=>{
//You can use object destructure in square bracket into function arguments. For Example: const obj={a:5,b:10}
// const {a,b}=obj or const a=obj.a ,const b=obj.b
return <Button onClick={()=>setReplayDrawer(false)}>back</Button>
}

material ui styling not applying

For some reason my material ui styles are not applying to my html element? Any idea why? I have no other styles applied to this page
import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { makeStyles } from '#material-ui/core';
const classes = makeStyles( (theme) => ({
root: {
paddingTop: theme.spacing(8),
backgroundColor: "white"
},
}) )
class Login extends Component {
render() {
return(
<div className = {classes.root}>
<LoginForm/>
</div>
);
}
}
export default Login;
In your case, if you want to style your class component, you should use withStyles. Try this:
import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { withStyles } from '#material-ui/core/styles';
const useStyles = (theme) => ({
root: {
paddingTop: theme.spacing(8),
backgroundColor: "white"
},
})
class Login extends Component {
render() {
const { classes } = this.props
return(
<div className = {classes.root}>
<LoginForm/>
</div>
);
}
}
export default withStyles(useStyles)(Login);
makeStyles returns a react hook to use in the component. Hooks also only work in functional components, so you'll need to convert Login to a functional component.
import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { makeStyles } from '#material-ui/core';
const useStyles = makeStyles(theme => ({
root: {
paddingTop: theme.spacing(8),
backgroundColor: "lightblue"
}
}));
const Login = props => {
const classes = useStyles();
return(
<div className={classes.root}>
<LoginForm/>
</div>
);
}
export default Login;

Overriding Material UI Badge style is not working

I am trying to translate and position the Badge component by overriding the root CSS style, but for some reason it's not taking anything into effect. My Card component seems to be seeing the styling via the className prop, but I for some reason I the Badge component isn't seeing anything. I am following the documentation here.
Here's my component:
import React, { useState } from "react";
import PropTypes from "prop-types";
import Card from "#material-ui/core/Card";
import { Badge } from "#material-ui/core";
import CardHeader from "#material-ui/core/CardHeader";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
anchorOriginTopRightRectangle: {
transform: "translate(-100%, -50%)"
}
},
card: {
maxWidth: 345
},
}));
const CardItem = ({
name,
discount
}) => {
const classes = useStyles();
return (
<Card className={classes.card}>
<CardHeader
title={
<>
{name}
<Badge
badgeContent={`-10%`}
color="error"
></Badge>
</>
}
subheader={"$1234"}
/>
// ... Card content
</Card>
);
};
export default(CardItem);
import React, { useState } from "react";
import PropTypes from "prop-types";
import Card from "#material-ui/core/Card";
import { Badge } from "#material-ui/core";
import CardHeader from "#material-ui/core/CardHeader";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
anchorTopRight: {
transform: "translate(-100%, -50%)"
},
card: {
maxWidth: 345
},
}));
const CardItem = ({
name,
discount
}) => {
const classes = useStyles();
return (
<Card className={classes.card}>
<CardHeader
title={
<>
{name}
<Badge
classes={{ anchorOriginTopRightRectangle: classes.anchorTopRight}} // <== Working Code
badgeContent={`-10%`}
color="error"
></Badge>
</>
}
subheader={"$1234"}
/>
// ... Card content
</Card>
);
};
export default(CardItem);

Making theme available in HOC component

I am trying to use a navbar from the Material UI collection however the component was written as a function and was using hooks. I'm trying to convert the component to a HOC (class) and I am having issues with accessing the theme in the component. Theme in the component in undefined
const styles = theme => ({
root: {
display: "flex"
},
});
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === "ltr" ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</IconButton>
Try this:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core';
import Paper from './Paper';
const styles = () => ({
root: {
display: 'flex'
}
});
const Bubble = props => {
const { classes } = props;
return (
<IconButton className={classes.root} onClick={this.handleDrawerClose}></IconButton>
);
};
export default withStyles(styles)(Bubble);

implement BackButton in react-admin

I need to implement a <BackButton /> in react-admin for example when I open show page for a resource I need able to back to the list page.
Can you guide me to implement this?
I'm not familiar with react-admin routing mechanism.
Now I'm using this component in my edit form actions props:
const MyActions = ({ basePath, data, resource }) => (
<CardActions>
<ShowButton basePath={basePath} record={data} />
<CloneButton basePath={basePath} record={data} />
{/* Need <BackButton /> here */}
</CardActions>
);
export const BookEdit = (props) => (
<Edit actions={<MyActions />} {...props}>
<SimpleForm>
...
</SimpleForm>
</Edit>
);
You can use react-router-redux's goBack() function to achieve this.
For example, your button component will look something like this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Button from '#material-ui/core/Button';
import { goBack } from 'react-router-redux';
class BackButton extends Component {
handleClick = () => {
this.props.goBack();
};
render() {
return <Button variant="contained" color="primary" onClick={this.handleClick}>Go Back</Button>;
}
}
export default connect(null, {
goBack,
})(BackButton);
Now use that button component in your CardActions.
You can get help from an example which uses react-router-redux's push() function in a similar way from the official docs.
Create a back button. This one will pass props and children (text) and uses react-router directly, which I think makes more sense and keeps your code simple.
// BackButton.js
import React from 'react'
import Button from '#material-ui/core/Button'
import { withRouter } from 'react-router'
const BackButton = ({ history: { goBack }, children, ...props }) => (
<Button {...props} onClick={goBack}>
{children}
</Button>
)
export default withRouter(BackButton)
Example usage:
import { Toolbar, SaveButton } from 'react-admin'
import BackButton from './BackButton'
const SomeToolbar = props => (
<Toolbar {...props}>
<SaveButton />
<BackButton
variant='outlined'
color='secondary'
style={{ marginLeft: '1rem' }}
>
Cancel
</BackButton>
</Toolbar>
)
The complete code is below.
//BackButton.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import { withStyles, createStyles } from '#material-ui/core/styles';
import { translate } from 'ra-core';
import Button from '#material-ui/core/Button';
import ArrowBack from '#material-ui/icons/ArrowBack';
import classnames from 'classnames';
import { fade } from '#material-ui/core/styles/colorManipulator';
const styles = theme =>
createStyles({
deleteButton: {
color: theme.palette.error.main,
'&:hover': {
backgroundColor: fade(theme.palette.error.main, 0.12),
// Reset on mouse devices
'#media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
});
const sanitizeRestProps = ({
basePath,
className,
classes,
label,
invalid,
variant,
translate,
handleSubmit,
handleSubmitWithRedirect,
submitOnEnter,
record,
redirect,
resource,
locale,
...rest
}) => rest;
class BackButton extends Component {
static contextTypes = {
router: () => true, // replace with PropTypes.object if you use them
}
static propTypes = {
label: PropTypes.string,
refreshView: PropTypes.func.isRequired,
icon: PropTypes.element,
};
static defaultProps = {
label: 'ra.action.back',
icon: <ArrowBack />,
};
render() {
const {
className,
classes = {},
invalid,
label = 'ra.action.back',
pristine,
redirect,
saving,
submitOnEnter,
translate,
icon,
onClick,
...rest
} = this.props;
return (
<Button
onClick={this.context.router.history.goBack}
label={label}
className={classnames(
'ra-back-button',
classes.backButton,
className
)}
key="button"
{...sanitizeRestProps(rest)}>
{icon} {label && translate(label, { _: label })}
</Button>
)
}
}
const enhance = compose(
withStyles(styles),
translate
);
export default enhance(BackButton);
//Toolbar.js
import React from 'react';
import {
Toolbar,
SaveButton,
DeleteButton,
} from 'react-admin';
import { withStyles } from '#material-ui/core';
import BackButton from './BackButton'
const toolbarStyles = {
toolbar: {
display: 'flex',
justifyContent: 'space-between',
},
};
export const CustomEditToolbar = withStyles(toolbarStyles)(props => (
<Toolbar {...props}>
<SaveButton/>
<DeleteButton/>
<BackButton/>
</Toolbar>
));
export const CustomCreateToolbar = withStyles(toolbarStyles)(props => (
<Toolbar {...props}>
<SaveButton/>
<BackButton/>
</Toolbar>
));

Resources