целевые псевдоселекторы в пользовательском интерфейсе материала - PullRequest
Новая
       40

целевые псевдоселекторы в пользовательском интерфейсе материала

0 голосов
/ 16 июня 2020

Мне интересно, есть ли способ настроить таргетинг на псевдоселекторы (::before, ::after) в пользовательском интерфейсе материала? Например, в таком компоненте? 

const useStyles = makeStyles((theme) => ({
  root: {
    textAlign: 'center',
    '&::before': {
      content: '"blabla"'
    },
    '&::after': {
      content: '"blabla"'
    },
    ':before': {},
    after: {}
  }
}));

function App(props) {
  const classes = useStyles();
  return (
    <Typography
      className={{ root: classes.root, before: classes.before, after: classes.after }}>
      {props.children}
    </Typography>
  );
}

1 Ответ

1 голос
/ 16 июня 2020

Я создал этот проект песочницы , вы можете проверить, все работает нормально, или поправьте меня, если мне что-то не хватает, чтобы понять вашу проблему 

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

const useStyles = makeStyles(theme => ({
  root: {
    textAlign: "center",
    "&::before": {
      content: '"-"'
    },
    "&::after": {
      content: '"-"'
    }
  }
}));

export default function App(props) {
  const classes = useStyles();
  return (
    <Typography className={classes.root} {...props}>
      Hello
    </Typography>
  );
}

Я думаю, вы используете className прописывается неправильно, вам нужно передать строку, а не объект. classes props ожидает объект, мы обычно используем свойства классов для компонента, которые имеют открытые имена классов для переопределения их внутренних стилей, например, в случае Typography Component вы можете переопределить стиль элемента root, подобный этому . 

export default function App(props) {
  const classes = useStyles();
  return (
    <Typography classes={{ root: classes.root }} {...props}>
      Hello
    </Typography>
  );
}

поэтому classes и classNames - это две разные вещи в Material-UI, но иногда (когда вы хотите применить стиль к root элементу компонента) оба предоставляют одно и то же решение. .

Я создал еще один проект Sandbox со вторым решением

...