score:3
i was searching for a way to style a webkit child selector.
audioplayer: {
"&::-webkit-media-controls-play-button": {
}
}
leaving to hopefully save someone else the time!
score:7
import { box, styled } from "@mui/material";
const styledbox = styled(box)({
// root selector (.muibox-root)
background: "red",
"&": {
// '&' points to the root selector which is the same as the above (.muibox-root)
background: "red"
},
"&&": {
// also a root selector but with higher css specificity (.muibox-root.muibox-root)
background: "red"
},
"& .childselector": {
// child selector (.muibox-root .childselector)
background: "orange",
// this '&' points to the current selector which is '.muibox-root .childselector'
"& .nestedchildselector": {
// nested child selector (.muibox-root .childselector .nestedchildselector) (#1)
background: "yellow"
}
},
"& .childselector .nestedchildselector": {
// same as (#1) (.muibox-root .childselector .nestedchildselector)
background: "yellow"
},
});
score:13
just in case if somebody's looking, here's how you select children with the data attribute:
...
root: {
"& span[data-index='0']": {
transform: 'translatex(-15%)',
},
"& span[data-index='3']": {
...
}
},
...
score:17
if you wanted to choose all the children you can use : "& > *" like:
root: {
"& > *": {
...
}
},
...
},
score:72
as advised from @josh, using &
deleted: {
"& td": {
background: "red"
}
}
https://codesandbox.io/s/llmq5or1w7
import react from "react";
import proptypes from "prop-types";
import { withstyles } from "@material-ui/core/styles";
import table from "@material-ui/core/table";
import tablebody from "@material-ui/core/tablebody";
import tablecell from "@material-ui/core/tablecell";
import tablehead from "@material-ui/core/tablehead";
import tablerow from "@material-ui/core/tablerow";
import paper from "@material-ui/core/paper";
const styles = theme => ({
root: {
width: "100%",
margintop: theme.spacing.unit * 3,
overflowx: "auto"
},
table: {
minwidth: 700
},
deleted: {
"& td": {
background: "red"
}
}
});
let id = 0;
function createdata(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const rows = [
createdata("frozen yoghurt", 159, 6.0, 24, 4.0),
createdata("ice cream sandwich", 237, 9.0, 37, 4.3),
createdata("eclair", 262, 16.0, 24, 6.0),
createdata("cupcake", 305, 3.7, 67, 4.3),
createdata("gingerbread", 356, 16.0, 49, 3.9)
];
function simpletable(props) {
const { classes } = props;
return (
<paper classname={classes.root}>
<table classname={classes.table}>
<tablehead>
<tablerow>
<tablecell>dessert (100g serving)</tablecell>
<tablecell align="right">calories</tablecell>
<tablecell align="right">fat (g)</tablecell>
<tablecell align="right">carbs (g)</tablecell>
<tablecell align="right">protein (g)</tablecell>
</tablerow>
</tablehead>
<tablebody>
{rows.map(row => {
return (
<tablerow key={row.id} classname={classes.deleted}>
<tablecell component="th" scope="row">
{row.name}
</tablecell>
<tablecell align="right">{row.calories}</tablecell>
<tablecell align="right">{row.fat}</tablecell>
<tablecell align="right">{row.carbs}</tablecell>
<tablecell align="right">{row.protein}</tablecell>
</tablerow>
);
})}
</tablebody>
</table>
</paper>
);
}
simpletable.proptypes = {
classes: proptypes.object.isrequired
};
export default withstyles(styles)(simpletable);
Source: stackoverflow.com
Related Query
- CSS child selector in MUI
- Target CSS child selector created by in material ui
- Style Mui child component within parent component using CSS modules
- How to apply css to parent element when child focused in Mui V5?
- CSS pseudo selectors with MUI
- How do you change a style of a child when hovering over a parent using MUI styles?
- MUI - How can I style the scrollbar with CSS in JS?
- How to style child components in React with CSS Modules
- How to use a global parent selector with CSS Modules
- CSS class selector styles not being applied in React Project
- Cannot add a child that doesn't have a CSS node to a node without a measure function
- CSS Modules & ReactJS: Parent and child CSS classes in different components
- :first-child selector not applying in emotion css
- MUI 5 className and SX prop show [object] instead of CSS class
- Use global parent selector with Sass and CSS Module
- Find component using CSS selector in TestUtils
- Reactjs Module CSS multiple class selector
- How to customize the select drop down MUI paper CSS
- How to use CSS transform: scale(); to fit child div to parent div responsively in react?
- How to use multiple CSS classes with MUI 5 SX prop?
- MUI v5 passing props to CSS theme using styled()
- how to use sibling selector css in styled
- React styled component child prop selector
- Material UI: "styled" child component not applying css rules
- Add CSS for html selector based on React state?
- How to dynamically change css selector property value in react js code?
- How to not let parent css impact css of a child component?
- why does css class inside parent css-module (App.js) override child css class that has its own css-module declared?
- How to move CSS from a '::before' selector into React?
- How to disable scroll parent component when child page (popup page) is opened? - CSS
More Query from same tag
- React with Google Chromes Puppeteer
- Trying to understand what is happening in this expression '${} | ${} '
- TypeError: oldCities is not iterable
- Hide/remove Next.js runtimeConfig in network calls -> document -> response
- populate select option in reactjs
- How to send data from React to Node?
- Throttle hide/show component ReactJs
- Jest mock react context
- What type to use in useRef of iframe
- How to force an update from inside mapStateToProps?
- Hash Router back button with React Router v4
- How to get the return value of a async function that returns a promise
- How to mock a complex react component with props using Jest/ react testing library
- How to pass data in body in get type Api in react.js?
- How to change chart font-size in Britecharts React?
- Input validation from the backend displaying on the console, but not displaying on the frontend React, nodejs bootstrap
- React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type
- consuming from context provider returns element type is invalid
- React component rerender multiple times
- React router appending query to URL
- Typescript Compiler Not Enforcing Generics
- backgroundImage path for css from public folder not working after build in reactjs
- React js Change Field specifying the attribute name
- e undefined in react js component
- Toggle the check box on and off, and console log the id's of the selected checkboxes. How can i do that?
- Uncaught TypeError: Cannot set property propTypes of function Settings(props)
- How to render a list of formatted messages using React-Intl
- react dropzone cannot post with axios
- React: this is null in event handler
- Limit line breaks in textarea