“Jak przekazać zmienne do Makestyles” Kod odpowiedzi

Przekaż rekwizyty do materiału do stylu interfejsu użytkownika

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

export interface StyleProps {
    height: number;
}

const useStyles = makeStyles<Theme, StyleProps>(theme => ({
  root: {
    background: 'green',
    height: ({height}) => height,
  },
}));

export default function Hook() {

  const props = {
    height: 48
  }

  const classes = useStyles(props);
  return <Button className={classes.root}>Styled with Hook API</Button>;
}
Cautious Coyote

Przekaż rekwizyty do Makestyles

const useStyles = props => makeStyles( theme => ({
    div: {
        width: theme.spacing(props.units || 0)  
    }
}));

//calling the function
const classes = useStyles(props)();
Graceful Gerenuk

Jak przekazać zmienne do Makestyles

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

const useStyles = makeStyles(theme => ({
  root: {
    background: ({color})=> color,
  },
}));

export default function Hook() {
  const props = {
    color: "#1D3874"
  }
  const classes = useStyles(props);
  return <Button className={classes.root}>Styled with Hook API</Button>;
}
Silly Shrike

Odpowiedzi podobne do “Jak przekazać zmienne do Makestyles”

Pytania podobne do “Jak przekazać zmienne do Makestyles”

Więcej pokrewnych odpowiedzi na “Jak przekazać zmienne do Makestyles” w JavaScript

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu