Целевой компонент вложенного материала в определении стиля JSS

У меня сейчас есть этот макет JSX

<div className={classes.bottomArea}>
    <Box display="flex" flexDirection="column">
        <Typography variant="h1" component="span">1982</Typography>
        <Typography variant="h5" component="span">Bed Count</Typography>
    </Box>
</div>

И в своих стилях я пытаюсь изменить цвет элемента h5 Typography

bottomArea: {
    $h5: {
        color: "red"
    }
}

Думаю, я понимаю, почему это не работает, но есть ли простой способ настроить таргетинг на этот h5 вариант?

Вот кодовый ящик, который нужно показать

https://codesandbox.io/s/material-demo-wb7ts


reactjs material-ui jss
person Jordan    schedule 22.06.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Предполагая, что вы хотите сохранить <span> в качестве своего компонента, вы можете настроить таргетинг на вариант h5, выбрав класс CSS, добавленный Typography, который равен MuiTypography-h5.

В приведенном ниже синтаксисе & относится к классу, созданному для bottomArea, а затем пробел указывает на таргетинг .MuiTypography-h5 как потомок.

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

const useStyles = makeStyles({
  bottomArea: {
    "& .MuiTypography-h5": {
      color: "red"
    }
  }
});

export default function Types() {
  const classes = useStyles();

  return (
    <div className={classes.bottomArea}>
      <Box display="flex" flexDirection="column">
        <Typography variant="h1" component="span">
          1982
        </Typography>
        <Typography variant="h5" component="span">
          Bed Count
        </Typography>
      </Box>
    </div>
  );
}

Изменить целевую вложенную типографику по варианту

Документация JSS: https://cssinjs.org/jss-plugin-nested/?v=v10.3.0#use--to-reference-selector-of-the-parent-rule

Связанный ответ: Как изменить стиль дочернего элемента при наведении указателя мыши на родительский с помощью стилей jss для материала material-ui

person Ryan Cogswell    schedule 22.06.2020
comment
будет ли это работать в производственном режиме, когда эти классы будут преобразованы в сокращенные имена классов? Такие как jss-101 и т. Д. - person Jordan; 22.06.2020
comment
@Jordan Классы Mui не сокращаются в производственном режиме в версии 4 (по крайней мере, не по умолчанию). Они действительно были сокращены в версии 3. - person Ryan Cogswell; 22.06.2020

arrow_upward
0
arrow_downward

Вы неправильно используете Typography опоры. Свойство variant определяет только стиль, применяемый к компоненту, тогда как свойство component определяет, какой тег будет использоваться для визуализации этого компонента.

Если вы хотите, чтобы ваш Typography компонент был h5:

<Typography variant="h5" component="h5">Bed Count</Typography>

А затем для укладки:

bottomArea: {
    '& h5': {
        color: "red"
    }
}

CodeSanbox: https://codesandbox.io/s/material-demo-6i1lq?file=/demo.js

Отличный день !

person Gabriel De Moura    schedule 22.06.2020

arrow_upward
0
arrow_downward

вы можете использовать withStyle для обновления определенных классов компонентов

проверьте этот Typography API

const Typography = withStyles(() => ({
  h5: {
    color: "red",
  },
}))(MuiTypography);

export default function Types() {
  return (
    <div>
      <Box display="flex" flexDirection="column">
        <Typography variant="h1" component="span">
          1982
        </Typography>
        <Typography variant="h5" component="span">
          Bed Count
        </Typography>
      </Box>
    </div>
  );
}

Редактировать демоверсию материала

person Raj Kumar    schedule 22.06.2020