menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

customize MUI-datatable with styled-component

December 7, 2018 at 2:21am

customize MUI-datatable with styled-component

December 7, 2018 at 2:21am
I was trying to change the font-size of th with styled-component but it is not working

December 7, 2018 at 2:21am
const MUIDataTableStyled = styled(MUIDataTable)`
&& {
font-size: 40px;
th {
font-size: 40px
}
}
`;
like-fill
2
Do the built in styled have a higher priority? Maybe you just need to add !important after the font size

December 9, 2018 at 1:36am
i didn't even see my see css in browser console

December 10, 2018 at 5:51am
I tried with My own custom component but it did not work as well. It was pretty basic component
const CustomCom = ()=>{
return (
<div>Child</div>
);
}
export default styled(CustomCom)`
height: 20px;
background: green;
`;
If your CustomCom function returns a styled element it should work:
const CustomCom = () => {
return styled.div``;
};

December 10, 2018 at 9:20pm
The problem might be also the css insertion point. Take a look at css priority. Check MUI and jss docs for more
Indeed it will work but I want to modify the other plugin component like Material UI
const CustomCom = ()=>{
return (
<div className={this.props.className}>Child</div>
);
}
export default styled(CustomCom)`
height: 20px;
background: green;
`;
I have to do little modification in order to make it work. it is working fine after making above changes

December 11, 2018 at 6:15am
Can you create codesandbox example with this?
it is working fine now. I dont have any issue with it right now. Do you still want me to make codesandbox?
just wondering
Ok forgot :) I was thinking that it is another mui library

December 11, 2019 at 8:23am
when I follow this way, I can't see any data in my table
I change MUITableDesign with this way
MUIDataTableStyled = styled.table.MuiTableCell-root { padding-top:5px !important; padding-bottom:5px !important; };
Edited