Question 168539 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can prop be passed to makeStyles in Javascript?

I have a component with a prop called styling. I pass inline styling here. I want to pass some styling I have written in makeStyles. The style I want to pass is:

const useStyles = makeStyles((theme) => ({
    fieldShape: {
        marginTop: "16px",
        [theme.breakpoints.up("md")]: {
            width: "625px",
        },
    },
}))

...
const classes = useStyles();

<MyComponent styling={classes.fieldShape}/>

...
// My Component
const { styling } = props
<TextField style={styling}/>
Tags:

2

Answers


  1. 0

    You are passing the return value of the hook, returned from makeStyles, not the makeStyles itself as you described in the title.

    You can pass it as deep prop

    the hook from makeStyles does not return object with styles, it returns object with class names (strings), so it should be:

    <TextField className={styling}/>   // className instead of style
    Login or Signup to reply.
  2. 0

    Your code is correct you need to just add : before style and styling

    something like this

    const useStyles = makeStyles((theme) => ({
    fieldShape: {
        marginTop: "16px",
        [theme.breakpoints.up("md")]: {
            width: "625px",
        },
    },
}))

...
const classes = useStyles();
//before <MyComponent styling={classes.fieldShape}/>
//After
<MyComponent :styling="classes.fieldShape"/> 

...
// My Component
const { styling } = props
//before <TextField style={styling}/>
//after
<TextField :style="styling"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search