Prime Community Forum

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.

We're checking this out and will respond soon.

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>

The button also has a className prop though. Regardless we will add a tutorial on styled components integration.