score:1

Accepted answer

here's an example showing a couple ways of targeting elements within a button:

import react from "react";
import button from "@material-ui/core/button";
import typography from "@material-ui/core/typography";
import doneicon from "@material-ui/icons/done";
import styled from "styled-components";

const styledbutton = styled(button)`
  & .muibutton-label {
    display: flex;
    flex-direction: column;
  }
  &:hover {
    color: red;
    .muisvgicon-root {
      background-color: blue;
    }
    .muitypography-root {
      color: green;
      &:nth-of-type(2) {
        color: purple;
      }
    }
  }
`;

export default function app() {
  return (
    <div classname="app">
      <button>default button</button>
      <styledbutton>styled button</styledbutton>
      <styledbutton>
        <doneicon />
        <span>styled button</span>
        <typography>typography 1</typography>
        <typography>typography 2</typography>
      </styledbutton>
    </div>
  );
}

edit styled-components hover button

this leverages the global class names applied to the elements which are documented in the css portion of the api page for each component (for instance the typography documentation is here: https://material-ui.com/api/typography/#css). as a general rule the top-most element within a material-ui component can be targeted via muicomponentname-root (e.g. muitypography-root for typography).


Related Query

More Query from same tag