Question

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

const useStyles = makeStyles({
  box: {
    '&::before': {
      content: props => `${props.text}` // should be props.text from <Child /> (i.e. '111')
    }
  }
});

function Parent() {
    return <Child text="111" />
}

function Child(props) {
    const { text } = props;
    const classes = useStyles({ text });
    return <Box className={classes.box} />
}

如何在<Child />之外使用道具？我试过数据属性，但不能正常工作。伪元素中的content似乎与其他属性有点不同

Answer 1

您可以在useStyles调用中传递道具。

const classes = useStyles({text: 'asdf'})

在样式定义中的用法将是这样

const useStyles = makeStyles({
  box: {
    '&::before': {
      content: (props) => `${props.text}`
    }
  }
});

Answer 2

您可以像这样传递道具：

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

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

function Parent() {
    return <Child hover='black' />
}

function Child(props) {
    //const props = { hover:'black' };
    const classes = useStyles(props);
    return <Box className={classes.box}/>
}

对于伪元素 :: before ， content 属性的语法略有不同。我们将附加的反向逗号与单个逗号一起使用，如下所示：

 '&::before':{
      content:'"Some text"'
    }

如果我们要传递道具，它将看起来像这样：

'&::before':{
      content:props=>`"${props.content}"`
    }

有关更多信息，请查看material-ui docs

材质用户界面-将道具应用于伪元素

2 个答案: