How to override prime-react component CSS styling?

Question

I am using prime-react to style my React page. But I want a more compact website with very few padding and minimum styling. For this purpose, I want to override a few CSS properties for the prime-react components.

For eg, I am trying to reduce the padding for the MenuBar -

HomePage.js

import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";

export default class HomeMenuBar extends Component {
    // menu code ...

    render() {
        return (
            <div>
                <div className="card">
                    <Menubar model={this.items} className={this.props.className} />
                </div>
            </div>
        );
    }
}

const ComponentView = styled(HomeMenuBar)`
    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
        padding: 0.1rem 1rem !important;
    }
`;

The above code makes no difference to the original styling. I am trying to make use of this component.

However, particularly using these styled-components I don't like it. I am new to react and would like to know if there are better alternatives like, storing the CSS properties in another file and then importing it in the required file. I tried this part but it also didn't work out.

Andrew Tvorch · Accepted Answer · 2020-10-06 07:55:02Z

1

I work with react over a year and have seen lot of different ways to customise components and so far, I think that styled-components is the most convenient way to customize components if you cook them right. I love to put all customized components with styled to a separate file near the index.js called styled.js of Component.js and Componnet.styled.js (in the separate folder of course MyComponent/index.js);

In styled.js you export all components like this:

export const Container = styled.div`
    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
        padding: 0.1rem 1rem !important;
    }
`

In index.js file you inport them like this:

import {Container} from './styled' 
// or import * as Styled from './styled' (if you have a lot of customized components);

export default class HomeMenuBar extends Component {
    // menu code ...

    render() {
        return (
            <Container>
                <div className="card">
                    <Menubar model={this.items} className={this.props.className} />
                </div>
            </Container>
        );
    }
}

If you want to try something more like classic css try to look at css-modules. This article can help https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/

edited Oct 6, 2020 at 7:55

answered Oct 5, 2020 at 8:25

Andrew Tvorch

1711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashish Mysterio Over a year ago

How to take care of imports ? I have created two separate files. For the styled.js I have put two imports, import styled from "styled-components"; import HomeMenuBar from './MenuBar' but it throws an error ReferenceError: Cannot access 'HomeMenuBar' before initialization

Andrew Tvorch Over a year ago

I appologize, I have misled you with my mistake in the code. I have wrote: ComponentView = styled (Home MenuBar) instead of ComponentView = styled.div

Andrew Tvorch Over a year ago

If you will whant to use HomeMenuBar as a child of other components and customize it again somwhere elese (may be for some unique case only in one place, usually it happens with buttons or other common components) you can wrap it with styled again like this: CustomMenuBar = styled(HomeMenuBar) ..more styles... But in this case inside HomeMenuBar you need to pass a prop className from props to a top level container in your render function. In my example it would be the next: <Container className={this.props.className}> or even pass all props <Container props={...this.props}>

hakobpogh · Accepted Answer · 2020-12-28 15:41:19Z

0

You can also try patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz example.

answered Dec 28, 2020 at 15:41

hakobpogh

6776 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to override prime-react component CSS styling?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related