CODEWITHSUNDEEP
javascriptreactjs
Mo Miah
Mo Miah

Reputation: 348

How to add inline style to React component as prop?

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?

Upvotes: -1

Views: 199

Answers (2)

Giovanni Esposito
Giovanni Esposito

Reputation: 11176

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>

  }

Upvotes: 1

Shahar Eliyahu
Shahar Eliyahu

Reputation: 126

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>

  }

Upvotes: 1

Related Questions