score:4
Accepted answer
when you are uncertain how to override the default styles, the best resource is to look at how the default styles are defined. the browser developer tools will show you the end result, and the source code will show you the approach to use to generate css with similar specificity.
below is the relevant code from tablesortlabel that controls the icon color:
export const styles = theme => ({
/* styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
you can use very similar syntax for the theme override:
const theme = createmuitheme({
overrides: {
muitablesortlabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});
relevant jss documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
Source: stackoverflow.com
Related Query
- MaterialUI theme styling for nested classes
- How to use theme colors for "color" prop used in MaterialUI components
- Using custom classes when styling a theme in MuiTheme
- How to ignore Material UI theme styling for component?
- Context for nested classes in ES6 is strange
- How do you provide default props for nested shape in React?
- How do I setState for nested object?
- React-router not loading css for nested pages on refresh
- React: Setting State for Deeply Nested Objects w/ Hooks
- How to apply antd dark theme for a React App?
- React router best practices for nested navigation?
- styling react-select using classes
- Styling Nested Components in Styled-Components
- Check for existence of classes on click (React)
- Using vanilla-extract as the styling engine for Material-UI
- Custom styling with scss for react-bootstrap
- ES6 Object Destructuring Default Values for Nested Parameters
- Typescript error for data-* attributes on MaterialUI React component
- React + Formik: Use value for nested object
- Applying specific theme for react material-table
- Returning data from apollo-server based on a filter for a nested field
- custom styling for material UI tooltip arrow?
- how to use css in JS for nested hover styles, Material UI
- How to check for deeply nested props
- react-router not returning content for nested routes on page load
- How to use theme in styles for custom class components
- How to pass nested styling to a component in React
- Material-UI React: Global theme override for Paper component
- Converting css with nested classes to styled components problem
- styled-components: Extend existing component with additional prop for styling
More Query from same tag
- Error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap')
- React Hooks - What is the recommended way to initialize state variables with useState() from props
- Reproducable asynchronous bug found in @testing-library/react
- How to validate firebase user current password
- how can i use array in routing with react-router
- Using States to handle changing of Buttons color, not working React
- npm start not detecting chrome and returning ENOENT error (ARCH Linux)
- Redirect Hash URL to standard URL
- convert dateTime format in react js
- How to proxy API REST calls : (FE hosted on Netlify)?
- How use :hover in :last-child in material-ui?
- How to put a javascript function inside a React Class based component?
- Delete an item without using index React
- how to set value of a class property in react
- react 25+5 clock for freecodecamp test fail
- How to make a Column data clickable one in React table?
- Enzyme- How to set state of inner component?
- How to fix the "set the request's mode to 'no-cors'" error?
- Differences between creating a new class to using export const
- Conditional Rendering based on async function
- Adding inline styles to react
- How to add new props dynamically to the component using navigator in React Native
- How to pass Array of Objects from Parent Component to Child Component in react
- Bootstrap styling making icons render too big
- how to get state right after state change in react hooks
- Trying to reformat this class into a function
- Storing and retrieving state from store
- One line Arrow function, return multiple
- noDataText in react-bootstrap-table-next does not work
- React's useMemo method resulting in invalid hook call