styled-components styles not being applied

UI Components for React
Post Reply
joshdanhall
Posts: 8
Joined: 09 Sep 2016, 07:13

15 Sep 2017, 09:44

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.

cagatay.civici
Prime
Posts: 18351
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Sep 2017, 14:21

We're checking this out and will respond soon.

joshdanhall
Posts: 8
Joined: 09 Sep 2016, 07:13

20 Sep 2017, 03:50

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>

cagatay.civici
Prime
Posts: 18351
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

20 Sep 2017, 20:35

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest