Question

我正在学习“如何设计用户界面组件的样式”。在本教程中，它为您提供了以下Hook Api代码：

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>;
}

据我了解，我有一个带有此样式道具的新按钮。我的问题是如何在渲染器中使用这个新按钮？

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

Answer 1

我的问题是如何在渲染器中使用此新按钮？

您创建了一个名为Hook的组件。（您应将其更改为Button或StyledButton，类似这样。

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

要在CreateUserPage中使用它，只需将其导入并渲染为普通的React组件即可。

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

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

Answer 2

此代码需要保存在专用javascript文件（例如NewButton.js）中，您现在可以从其他组件导入了。< / p>

import NewButton from './NewButton'

<NewButton>Hi</NewButton>

您需要调整挂钩以传播其内容：

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

如何使用Hook API样式

2 个答案: