Как нацелиться на базу кнопок с помощью Material-UI и Styled-компонентов

Question

Использование компонентов ToggleButton и ToggleButtonGroup из material-ui, начиная с шаблона Гатсби материала-пользовательского интерфейса . Чтобы избежать распространенных material-ui ошибок с производственными сборками , пытающимися также использовать styled-components.

У меня есть следующий код реакции, который не может правильно нацелиться на базовую кнопку пользовательского интерфейса материала.

• Как мне правильно сделать это с помощью стилевых компонентов
• Есть ли лучшая практика, которую мне не хватает?

(я знаю, что на макете может существовать многовариантность пользовательского интерфейса, но, скажем, я хотел вместо него навести курсор или на цвет текста базового элемента).

// Also imports React, gatsby packages etc

import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import styled from 'styled-components';

const StyledToggleButton = styled(ToggleButton)`
  color: black;
  ${'' /* Do not care as much in this section */}

  & .MuiButtonBase{
    color: pink;
    border-radius: 10em;
     ${'' /* THIS IS WHERE I WANT TO EFFECT THE BASE BUTTONS! DO NOT THINK .MuiButtonBase is correct!*/}
  }
`;

Answer 1

В вашем коде есть две проблемы:

• Вы используете класс MuiButtonBase CSS, но его не существует. Правильное CSS имя класса равно MuiButtonBase-root.
• Вы ссылаетесь на класс CSS с помощью селектора потомка , но MuiButtonBase-root находится на Элемент root (то есть тот же элемент, к которому будет применяться имя класса styled-components), поэтому соответствующий синтаксис - &.MuiButtonBase-root (без пробела после амперсанда). Единственный эффект .MuiButtonBase-root в этом случае заключается в увеличении специфичности , так что он выигрывает над стилем по умолчанию. Этого же эффекта можно добиться, используя && (т.е. просто удваивая имя сгенерированного класса).

Ниже приведен пример, показывающий несколько различных способов задания стилей, каждый из которых имеет эквивалентную специфичность.

import React from "react";
import { makeStyles, StylesProvider } from "@material-ui/core/styles";
import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
import FormatAlignCenterIcon from "@material-ui/icons/FormatAlignCenter";
import FormatAlignRightIcon from "@material-ui/icons/FormatAlignRight";
import FormatAlignJustifyIcon from "@material-ui/icons/FormatAlignJustify";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import styled from "styled-components";

const useStyles = makeStyles(theme => ({
  toggleContainer: {
    margin: theme.spacing(2, 0)
  }
}));

const StyledToggleButton1 = styled(ToggleButton)`
  && {
    color: pink;
    border-radius: 10em;
  }
`;
const StyledToggleButton2 = styled(ToggleButton)`
  &.MuiToggleButton-root {
    color: blue;
    border-radius: 1em;
  }
`;
const StyledToggleButton3 = styled(ToggleButton)`
  &.MuiButtonBase-root {
    color: purple;
    border-color: blue;
  }
`;

export default function ToggleButtons() {
  const [alignment, setAlignment] = React.useState("left");

  const handleAlignment = (event, newAlignment) => {
    setAlignment(newAlignment);
  };

  const classes = useStyles();

  return (
    <StylesProvider injectFirst>
      <div className={classes.toggleContainer}>
        <ToggleButtonGroup
          value={alignment}
          exclusive
          onChange={handleAlignment}
          aria-label="text alignment"
        >
          <StyledToggleButton1 value="left" aria-label="left aligned">
            <FormatAlignLeftIcon />
          </StyledToggleButton1>
          <StyledToggleButton2 value="center" aria-label="centered">
            <FormatAlignCenterIcon />
          </StyledToggleButton2>
          <StyledToggleButton3 value="right" aria-label="right aligned">
            <FormatAlignRightIcon />
          </StyledToggleButton3>
          <ToggleButton value="justify" aria-label="justified">
            <FormatAlignJustifyIcon />
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    </StylesProvider>
  );
}