如何向React组件传递style prop添加内联样式并生效？

错误原因梳理 #

• 样式调用方式错误：makeStyles生成的样式 hook 调用后返回的类名需要通过className属性传入组件，不是style属性，同时你已经执行useStyles()得到样式变量，直接取该变量下的类名即可，不需要再从useStyles上取属性。
• 定位属性缺失：bottom属性仅在元素position不为默认的static时生效，你需要给按钮添加position属性（常用可选值relative/absolute/fixed，可根据你的布局需求选择）。
• 位置属性不符合需求：你要让按钮更靠上，若用bottom属性需要增大值（距离底部越远位置越靠上），也可以直接用top属性设置距离顶部的距离，调整更直观。
• 组件未正确返回：你的App组件缺少return语句，Button元素实际没有被渲染。

修正后的完整代码 #

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,
    position: 'fixed', // 可根据布局需求换成relative/absolute
    top: 30, // 距离顶部30px，数值越小位置越靠上，可自行调整
    // 如果希望用距离底部的方式控制就换成 bottom: 100 这类更大的数值即可
  },
}));

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

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

内容的提问来源于stack exchange，提问作者Mo Miah