material-ui makeStyles: как стилизовать по имени тега?

Я хочу добавить правило для всех <p> в текущем компоненте. Я нигде не мог найти информацию (документация по интерфейсу материала, переполнение стека и т. Д.) О том, как добавлять правила CSS по имени тега.

Это не поддерживается?

Я пытаюсь сделать что-то вроде этого:

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        'p': {
            margin: 0,
        },
        someClass: {
            fontSize: 14,
        },
    })
);

РЕДАКТИРОВАТЬ:

Использование решения Райана работает, но создает новую проблему:

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& p': {
                margin: 0,
            },
        },
        // I want this rule to override the rule above. It's not possible in the current configuration, because `.root p` is more specific than `.title`
        // This problem originates from the fact that I had to nest the rule for `<p>` inside a CSS class
        title: {
            margin: '0 0 16px',
        },
    })
);

export default () => {
    const classes = useStyles({});

    return (
        <div className={classes.root}>
            <p className={classes.title}>My title</p>
            <p>A paragraph</p>
            <p>Another paragraph</p>
        </div>
    );
};

reactjs javascript material-ui jss
person Liran H    schedule 21.04.2020    source источник
comment
Вы можете добавить файл css в свой проект и импортировать его как import 'style.css'   -  person acbay    schedule 21.04.2020

Ответы (1)


arrow_upward
14
arrow_downward

Поскольку вы хотите, чтобы эта область была ограничена вашим компонентом, вам нужен класс для применения к вашему компоненту (например, classes.root в примере ниже). Затем вы можете настроить таргетинг на все p элементы внутри этого, используя & p. Если затем вам нужно переопределить стиль тега p для другого класса CSS в вашем компоненте, вы можете использовать другое вложенное правило для нацеливания на теги p, которые также имеют этот класс (например, classes.title в примере).

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

const useStyles = makeStyles(theme => ({
  root: {
    "& p": {
      margin: 0,
      "&$title": {
        margin: "0 0 16px"
      }
    }
  },
  title: {}
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <p>This paragraph isn't affected.</p>
      <p>This paragraph isn't affected.</p>
      <div className={classes.root}>
        <p className={classes.title}>My title</p>
        <p>A paragraph</p>
        <p>Another paragraph</p>
      </div>
    </div>
  );
}

Редактировать целевые вложенные теги в JSS

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

person Ryan Cogswell    schedule 21.04.2020
comment
Это работает, спасибо! К сожалению, теперь у меня возникла новая проблема: правило .someClass p слишком специфично, что означает, что оно переопределяет другие стили в этом createStyles объекте. - person Liran H; 21.04.2020
comment
@LiranH Пожалуйста, покажите эти другие стили в коде вашего вопроса. - person Ryan Cogswell; 21.04.2020