如何使用材料用户界面和样式组件定位按钮基础

使用ToggleButton and ToggleButtonGroup组件来自material-ui从材料-ui 开始盖茨比模板 https://github.com/mui-org/material-ui/tree/master/examples/gatsby。为避免常见material-ui 生产版本错误 https://material-ui.com/getting-started/faq/尝试使用styled-components以及。

我有以下反应代码，无法正确定位材质 ui 基本按钮。

• 如何使用样式组件正确执行此操作
• 我缺少最佳实践吗？

（我知道材料用户界面可能对布局有意见，但我说我想要基本元素的悬停或文本颜色）。

// 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!*/}
  }
`;

您的代码中有两个问题：

• 您正在使用一个MuiButtonBaseCSS 类，但这不存在。正确的CSS 类名 https://material-ui.com/api/button-base/#css is MuiButtonBase-root.
• 您正在使用以下方式引用 CSS 类后代选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator, but MuiButtonBase-root位于根元素上（即与styled-components类名将应用于），因此适当的语法是&.MuiButtonBase-root（& 符号后没有空格）。唯一的效果是.MuiButtonBase-root在这种情况下是增加特异性 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity以便它胜过默认样式。通过使用也可以达到同样的效果&&（即只是将生成的类名加倍）。

下面的示例显示了指定样式的几种不同方法，所有这些方法都具有相同的特异性。

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>
  );
}