Achieving the perfect button using a combination of material-ui and styled-components

Question

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well.

The following react code is having trouble targeting the material ui base button correctly.

What is the correct way to achieve this using styled-components?
Am I overlooking any best practices?

(I understand that material ui may have specific guidelines on layout, but suppose I wanted to customize the hover or text color of the base element).

// 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;
  ${'' /* Not focusing too much on this section */}

  & .MuiButtonBase{
    color: pink;
    border-radius: 10em;
     ${'' /* THIS IS WHERE I WANT TO AFFECT THE BASE BUTTONS! NOT SURE IF .MuiButtonBase IS CORRECT!*/}
  }
`;

css reactjs material-ui gatsby styled-components

Answer 1

Answer №1

Your code contains two issues that need to be addressed:

The CSS class MuiButtonBase is being used, but it does not exist. The correct CSS class name is MuiButtonBase-root.
You are using a descendant selector to reference the CSS class, but MuiButtonBase-root should be on the root element itself. Therefore, the appropriate syntax would be &.MuiButtonBase-root (without the space after the ampersand). Using .MuiButtonBase-root in this manner only serves to increase specificity to override default styling, which can also be achieved by doubling the generated class name as &&.

An example below demonstrates various methods of specifying styles with equivalent 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>
  );
}

https://codesandbox.io/s/togglebutton-styled-components-2l6u5?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Your code contains two issues that need to be addressed:

The CSS class MuiButtonBase is being used, but it does not exist. The correct CSS class name is MuiButtonBase-root.
You are using a descendant selector to reference the CSS class, but MuiButtonBase-root should be on the root element itself. Therefore, the appropriate syntax would be &.MuiButtonBase-root (without the space after the ampersand). Using .MuiButtonBase-root in this manner only serves to increase specificity to override default styling, which can also be achieved by doubling the generated class name as &&.

An example below demonstrates various methods of specifying styles with equivalent 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>
  );
}

https://codesandbox.io/s/togglebutton-styled-components-2l6u5?fontsize=14&hidenavigation=1&theme=dark

Achieving the perfect button using a combination of material-ui and styled-components

Answer №1

Similar questions

Resolving the issue: "How to fix the error "Credentials are not supported if the CORS header 'Access-Control-Allow-Origin' is '*' in React?"

What could be causing this jQuery to malfunction?

Customizing the Paper Component Theme in Material-UI React

Getting the text value from a table in JavaScript is a straightforward process. By using

Challenges with Enzyme setup

"Utilizing the power of Twitter Bootstrap and Snap.js for

React-admin will automatically add the query "_eq" for you

Employing the Context API to simulate the functionality of useSelector and useDispatch in redux version 5

Notifications for AngularJS tabs

What is the best way to implement a transaction fee when a specific function is triggered within my contract?

How can I ensure that my boxes are aligned in a straight line?

Passing information from the frontend to the backend in a ReactJS/NodeJS application: A guide on sending

What is the purpose of using square brackets in a CSS style declaration?

Problem with accessing state in React 16

Setting an object in state based on values entered in a Material UI textfield

The Material UI Icon is missing from the location '@mui/icons-material/Send.js'

Achieve consistent card body heights in Bootstrap 4 with the card group feature

Different hover effects for Material-UI [v0.x] RaisedButton

Leveraging the power of ReactJS for efficiency in executing multiple API calls concurrently

I am looking to include both the type and maxLength attributes in a MUI TextField