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>
);
}
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
).
Source: stackoverflow.com
Related Query
- Apply onHover styles to elements in MuiButton
- Apply MUI styles to non-MUI markup elements
- How to apply global styles with CSS modules in a react app?
- How do I apply vendor prefixes to inline styles in reactjs?
- React - How to apply CSS styles to iframe content
- ReactJS apply multiple inline styles
- How would I apply Material-UI managed styles to non-material-ui, non-react elements?
- How to apply styles to react-burger-menu button with styled-components?
- How to apply styles to a child class in JSS
- Refusing to apply styles because MIME type
- Mui v5.0.4 makeStyles, withStyles won't apply styles to mui components
- How to conditionally apply styles in a react component with CSS Modules?
- Styled Components - two different elements with the same styles
- How to apply styles based on props?
- how to apply a few styles properties depends on condition styled-components
- Office UI Fabric - How to apply css styles to existing components
- Styles don't apply using react-css-modules
- Apply button 'Active' styles on keypress in React
- How to affect child elements styles from a React library?
- Lost styles while dragging elements
- React - How to apply styles via ref
- Unable to apply styles to styled-component element in Reactjs
- Unable to apply styles to a specific text of a prop
- How to assign variable to styles elements in Material-UI from a .ini file
- How can I direct React-Quill to apply inline styles instead of classes?
- looking for render function will take HTML and apply styles to the string with react js
- how to apply scss styles my CRA app with Material UI?
- react : apply hover to all elements inside parent div
- Can't apply styles to Textfield using className in materi-ui latest version V1.0.0-beta.26
- React-bootstrap class styles don't apply
More Query from same tag
- The TextField on Paper closes unexpectedly in Material UI
- React emotion-theming not working during server-side rendering
- How can I test functions as child in React? The snapshot is
- React.Js - Part of the DOM does not render
- Conditionally render class or style variable
- Semantic UI react - implement popup on dropdown select
- change element size in drop-zone with react-beautiful-dnd
- React Redux SSR how to suppress initial actions called from componentDidMount?
- Material UI: Menu refactoring
- Material-UI: Uncaught RangeError: Maximum call stack size exceeded
- react-TS how to hide login component if you already logged in
- Properly typed withRouter - React router v6
- How to shift the Google Maps zoom button to top
- Using React's 'ref' attribute with Material-UI
- Turn off/stop browser camera in my sample react video call application
- this.handleClick.bind(this) in function component
- Implement a generic that is an object in TypeScript
- How do I display Images in React from a Django Rest API?
- How to re execute componentDidMount again when i click the component again?
- JEST testing on redux is not working as expected
- Trouble with array and state
- How to correctly use types in universal function?
- Dispatching an action in a debounced function using redux-thunk
- superagent post vs put in react
- How to stop an activity sending to directline webchat from React Js code
- Conditional rendering elements in object in JavaScript
- How to add object to react-final-form field name dynamically?
- Apollo Client delete Item from cache
- React Route Home Page and Admin Page
- How does infinite scroll work in case of caching redis