How to use Hook API style

Question

I am learning 'how to style material ui components'. In the tutorial it gives you this Hook Api code below:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

As far as I understand, I have a new button having this style props. My question is how I can use this new button inside my render?

class CreateUserPage extends React.Component {
    render() {
        return (
            // How to use it???
        );    
    }
}

score 1 · Accepted Answer · answered Oct 17 '19 at 12:07

1

My question is how I can use this new button inside my render?

You created a component that is named Hook. (You should change it to Button or StyledButton, something like that.

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

To use it in CreateUserPage, you just import it and render it like a normal React Component.

import Hook from '../place/here/your/component/is'

class CreateUserPage extends React.Component {
    render() {
        return (
            ...
            <Hook />
        );    
    }
}

answered Oct 17 '19 at 12:07

Vencovsky

28,550
17
109
176

Can I also export multiple Hook functions like that? – Eray Tuncer Oct 17 '19 at 12:11
1

@ErayTuncer Yes. It's not called `Hook functions`, but `Functional Components`, wich is also React Component. The hook function would be `useStyles`, wich can only be used in `Functional Components` and don't work with `Class Components`. – Vencovsky Oct 17 '19 at 12:13

score 1 · Answer 2 · answered Oct 17 '19 at 12:09

This code needs to be saved in a dedicated javascript file (eg. NewButton.js) which you will now be able to import from other components.

import NewButton from './NewButton'

<NewButton>Hi</NewButton>

You will need to adapt your hook to propagate it's content:

export default function Hook({children}) {
  const classes = useStyles();
  return <Button className={classes.root}>{children}</Button>;
}

How to use Hook API style

2 Answers2