How to add inline style to React component as prop?

Question

I am trying to move the BUTTON component below by adding a style further up my screen but it does not seem to be responding.

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({

downButton: {
marginLeft: 10,
bottom: 50
},
}));

function App() {
const style = useStyles();

  <Button
  style={useStyles.downButton}
  onClick={() => console.log('clicked')}
  color="default"
  startIcon={<ExpandMoreIcon/>}
  ></Button>

  }

How do I add style this button and move it?

Giovanni Esposito · Accepted Answer · 2021-09-06 15:06:00Z

1

You have to use style not useStyles when you call css in component:

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({

downButton: {
marginLeft: 10,
bottom: 50
},
}));

function App() {
const style = useStyles();

  <Button
  className={style.downButton} //<-- here should be style, not useStyles
  onClick={() => console.log('clicked')}
  color="default"
  startIcon={<ExpandMoreIcon/>}
  ></Button>

  }

edited Sep 6, 2021 at 15:06

answered Sep 6, 2021 at 14:55

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mo Miah Over a year ago

I seem to get an error after chaning styles to style Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Giovanni Esposito Over a year ago

@MoMiah try to replace style prop with className. I updated my answer

Giovanni Esposito Over a year ago

@MoMiah No problem. If you think the answer is correct, please, mark it as valid. Happy coding =)

Shahar Eliyahu · Accepted Answer · 2021-09-06 14:56:22Z

1

You was almost there 😁

import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({

downButton: {
marginLeft: 10,
bottom: 50
},
}));

function App() {
const style = useStyles(); 

  <Button
  style={style.downButton} //THIS SHOULD BE style NOT useStyles
  onClick={() => console.log('clicked')}
  color="default"
  startIcon={<ExpandMoreIcon/>}
  ></Button>

  }

answered Sep 6, 2021 at 14:56

Shahar Eliyahu

1261 silver badge3 bronze badges

1 Comment

Mo Miah Over a year ago

Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Collectives™ on Stack Overflow

How to add inline style to React component as prop?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related