Hi, I'm attempting to override some primereact styles in my application which uses styled-components for styling. For example:-
const DealTabsView = styled(DealTabsComponent)`
.ui-tabview.ui-tabview-top > .ui-tabview-nav li {
float: right;
}
`;
But unfortunately it's not working. If I insepct the css generated, It looks like this:-
/* sc-component-id: sc-htpNat */
.sc-htpNat {}
.kSVpkc .ui-tabview.ui-tabview-top > .ui-tabview-nav li{float:right;}
Do you know if it's possible to use styled-components with primereact?
Thanks.
styled-components styles not being applied
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
We're checking this out and will respond soon.
-
- Posts: 8
- Joined: 09 Sep 2016, 07:13
I have figured this out, needed to wrap the component in an outer div, which includes the parent className. eg:-
<div className={this.props.className}>
<Button label='A label' />
</div>
<div className={this.props.className}>
<Button label='A label' />
</div>
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
The button also has a className prop though. Regardless we will add a tutorial on styled components integration.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests