I have a Component and I want to override it's styles. I have used styled-components to build them.
My doubt is, how can one override styles of a child component.
I want to know better approach.
Example
const Child = styles.div'
font-size: '10px'
'
const Wrapper = styles.div'
color: red
'
const DummyComponent = () => (
<Wrapper>
<Child>Hello</Child>
</Wrapper>
)
I want to change padding or margin or any other property of child.
What is the better approach.
Using inline style or className. Or is there any better approach in styled-component to do this.
Using inline style
const DummyComponent = ({childStyles}) => (
<Wrapper>
<Child style={{...childStyles}}>Hello</Child>
</Wrapper>
)
Using className
const DummyComponent = ({childClass}) => (
<Wrapper>
<Child className={childClass}>Hello</Child>
</Wrapper>
)
I would recommend to use classNames to override the behaviors. you just need your rules stronger. tex:
const DummyComponent = ({childClass}) => (
<Wrapper className="div--wrapper">
<Child className="div--child">Hello</Child>
</Wrapper>
)
// css
.div--wrapper .div--child{
// override css go here
}
The CSS !important rule will override tags with higher precedence. For example, if you apply a class to the child element with the following code background-color: green !important; this will override other background-color rules that may be applied to the child element. This is the best way to override styles.
Related
I did see a lot of similar questions on SO but at end, it seems that my issue is a bit different..
I have a react project where (for some reason) I want two types of CSS loading:
Some global (imported from main.tsx as import 'assets/global.css';)
Some scoped (imported from a component as import style from './style.module.css';)
The global ones works as expected, it's the module one that are weird.. If I want to style a simple <a></a> within a div, this following works:
copyrights
.copyrights a { // as Link is rendered as a `<a></a>`
text-decoration: none;
}
/*...*/
import style from './style.module.css';
export const CopyrightsComponent = () => {
return (
<Container className={style.copyrights}>
<Row className={`justify-content-center`}>
<p>
{COPYRIGHTS_TEXT}
<Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_TERMS_OF_USE_HYPERLINK}</Link>
<Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_PRIVACY_POLICIES_HYPERLINK}</Link>
</p>
</Row>
</Container>
);
};
export default CopyrightsComponent;
HOWEVER! When trying to nest CSS in order to select the right child (like a specific img within a certain div), it doesn't work.. I don't understand why
foo
.foo .bar1 a {
text-decoration: none;
}
.foo .bar2 a {
color: red;
}
/*...*/
import style from './style.module.css';
export const FooComponent = () => {
return (
<div className{style.foo}>
<div className{style.bar1}>
<a>bar 1</a>
</div>
<div className{style.bar2}>
<a>bar 2</a>
</div>
</div>
);
};
export default FooComponent;
Thanks for any help...
This doesen't work since your .bar class is scoped to the element.
It should work, if you reduce the specificity of the selector to either:
.foo div a
or,
.bar a
When you utilize CSS modules, and you link your class directly to an element - the class name becomes unique, since obfuscation is appended to the class name, as per the CSS modules spec (It is scoped to the element). You can see this by inspecting a DOM element that you have linked to a class with this technique; It looks something like this: component_name-module--class_name--eq-vo.
Because of this, when you try to chain custom selectors like you did originally, the middle part of the selector (.bar) doesen't exist in its original simplicity because of this obfuscation.
I'm using scoped CSS with https://github.com/gaoxiaoliangz/react-scoped-css and am trying to follow the following rules (besides others):
Scoped component CSS should only include styles that manipulate the "inside" of the component. E.g. manipulating padding, background-color etc. is fine whilst I try to stay away from manipulating stuff like margin, width, flex etc. from within the component CSS
Manipulating the "outside" of a component (margin, width, flex etc.) should only be done by "consuming" or parent components
This is rule is somewhat derived from some of the ideas behind BEM (and probably other CSS methodologies as well) and allows for a rather modular system where components can be used without "touching their outside" but letting the parent decide how their internal layouts etc. works.
Whilst this is all fine in theory, I don't really know how to best manipulate the "outside styles" of a component from the consuming code which is best shown with an example:
search-field.scoped.css (the component)
.input-field {
background: lightcoral;
}
search-field.tsx (the component)
import './search-field.scoped.css';
type SearchFieldProps = {
className: string;
};
export const SearchField = (props: SearchFieldProps) => {
return <input className={`input-field ${props.className}`} placeholder="Search text" />;
};
sidebar.scoped.css (the consumer)
.sidebar-search-field {
margin: 16px;
}
sidebar.tsx (the consumer)
import './sidebar.scoped.css';
// ...
export const Sidebar = () => {
return (
<SearchField className="sidebar-search-field" />
(/* ... */)
);
};
In the above example, the CSS from the class sidebar-search-field in sidebar.scoped.css is not applied because the class passed to SearchField is scoped to the Sidebar and the final selector .sidebar-search-field[data-sidebarhash] simply doesn't match as the input element of the SearchField (obviously) doesn't have the data attribute data-sidebarhash but data-searchfieldhash.
ATM, I tend to create wrapper elements in situations like this which works but is rather cumbersome & clutters the markdown unnecessarily:
// ...
export const Sidebar = () => {
return (
<div className="sidebar-search-field">
<SearchField />
</div>
(/* ... */)
);
};
Question
Is there any way to "style scoped CSS component from the outside"?
Ps.: I'm not sure if all the above also applies to scoped styles in Vue. If not, please let me know how it works there so that I can create a feature request in https://github.com/gaoxiaoliangz/react-scoped-css.
I have a Parent that has a deeply nested child which can get an attribute if selected.
How do I style the background-color of the parent, only if a deeply nested child has an attribute of 'selected'?
<Parent>
<Child>
<NestedChild selected>
This is what I have tried:
const Parent = styled.div`
&[selected] { // But this only styled the child, not the parent}
`;
The CSS way
There isn't one - CSS doesn't allow an element to affect styling of its parents, only that of its children or siblings.
The React purist way
Use the useContext hook along with createContext and a context Provider, or simply pass a callback down through all the nested levels.
The hacky-yet-simple React + vanilla JavaScript way
// set up some styles for `has-child-selected` class
// ...
const Parent = ({ ... }) => {
return <div className="parent">
...
</div>
}
const Child = ({ selected }) => {
const ref = useRef(null)
useEffect(() => {
ref.current.closest('.parent')
.classList[selected ? 'add' : 'remove']('has-child-selected')
}, [selected])
return <div ref={ref}>
...
</div>
}
Edit: I realized I didn't even mention Styled Components in this answer, but I don't think it would change very much. Perhaps someone with more knowledge of Styled Components would be able to enlighten.
I think you can do it with CSS only. So I remember at least. try this.
you can change any tag, and any attr
li:has(> a[href="https://css-tricks.com"]){
color:red;
}
Looks Like it doesn't work at this time. but check when you see this.
:D :D
I am using react-table and I would like to apply CSS rules to the class rt-td which is not accessible nor modifiable through what their API offers.
In CSS I would just overwrite the CSS class from within my stylesheet. But how do you that with styled components? I heard it's an anti pattern, but what else should I do?
Suppose the parent of the the component ReactTable exported by react-table is a simple div.
const Test = () => (
<div>
<ReactTable someProperty={someValue}/>
</div>
)
you can influence the style of the class rt-td inside ReactTable by 1) converting the parent of ReactTable into a styled-components and 2) injecting style to override rt-td into the CSS of the aforementioned parent.
const Parent = styled.div`
.rt-td {
/* your custom style goes here*/
}
`
const Test = () => (
<Parent>
<ReactTable someProperty={someValue}/>
</Parent>
)
Usually that does the trick. If the style definition for rt-td inside react-table still overrides your custom definition due to specificity, keep repeating the class name rt-td inside Parent (like this .rt-td.rt-td) until your custom style wins.
I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve.
I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.
There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :
<Drawer style={{height:'90%'}} />
But it didn't work.
The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.
Any idea on how I can define the height?
Here you go:
<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
containerStyle is prohibited in version 1.0 and above
So you need to use props classes instead
Here is an example to this nontrivial case
import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
paper: {
height: 'calc(100% - 64px)',
top: 64
}
})
class CustomDrawer extends Component {
...
render () {
const classes = this.props.classes
return (
<Drawer
classes={{paper: classes.paper}}
>
...
)
}
CustomDrawer.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styleSheet)(CustomDrawer)