The PrimeReact components are not displaying the PrimeReact theme properly

I'm currently working on integrating a Menubar component from PrimeReact into my React application. I tried to apply one of the predefined PrimeReact themes by importing it, but the page ended up looking strange.

When I imported "./../../node_modules/primereact/resources/themes/nano/theme.css", it seemed like the CSS wasn't being applied properly, except for a change in background color. However, importing "./../../node_modules/primereact/resources/primereact.css" made it look fine.

Below is the code snippet I'm using:

import React, { useState } from 'react';
import { PrimeReactProvider, PrimeReactContext } from 'primereact/api'
import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';
import "./../../node_modules/primereact/resources/themes/nano/theme.css";

export default function TabSidebar()
{
    const items = [
        {
            label: 'File',
            icon: 'pi pi-fw pi-file',
            items: [
                {
                    label: 'New',
                    icon: 'pi pi-fw pi-plus',
                    items: [
                        {
                            label: 'Bookmark',
                            icon: 'pi pi-fw pi-bookmark'
                        },
                        {
                            label: 'Video',
                            icon: 'pi pi-fw pi-video'
                        },

                    ]
                },
                {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-trash'
                },
                {
                    separator: true
                },
                {
                    label: 'Export',
                    icon: 'pi pi-fw pi-external-link'
                }
            ]
        },
        {
            label: 'Edit',
            icon: 'pi pi-fw pi-pencil',
            items: [
                {
                    label: 'Left',
                    icon: 'pi pi-fw pi-align-left'
                },
                {
                    label: 'Right',
                    icon: 'pi pi-fw pi-align-right'
                },
                {
                    label: 'Center',
                    icon: 'pi pi-fw pi-align-center'
                },
                {
                    label: 'Justify',
                    icon: 'pi pi-fw pi-align-justify'
                },

            ]
        },
        {
            label: 'Users',
            icon: 'pi pi-fw pi-user',
            items: [
                {
                    label: 'New',
                    icon: 'pi pi-fw pi-user-plus',

                },
                {
                    label: 'Delete',
                    icon: 'pi pi-fw pi-user-minus',

                },
                {
                    label: 'Search',
                    icon: 'pi pi-fw pi-users',
                    items: [
                        {
                            label: 'Filter',
                            icon: 'pi pi-fw pi-filter',
                            items: [
                                {
                                    label: 'Print',
                                    icon: 'pi pi-fw pi-print'
                                }
                            ]
                        },
                        {
                            icon: 'pi pi-fw pi-bars',
                            label: 'List'
                        }
                    ]
                }
            ]
        },
        {
            label: 'Events',
            icon: 'pi pi-fw pi-calendar',
            items: [
                {
                    label: 'Edit',
                    icon: 'pi pi-fw pi-pencil',
                    items: [
                        {
                            label: 'Save',
                            icon: 'pi pi-fw pi-calendar-plus'
                        },
                        {
                            label: 'Delete',
                            icon: 'pi pi-fw pi-calendar-minus'
                        }
                    ]
                },
                {
                    label: 'Archive',
                    icon: 'pi pi-fw pi-calendar-times',
                    items: [
                        {
                            label: 'Remove',
                            icon: 'pi pi-fw pi-calendar-minus'
                        }
                    ]
                }
            ]
        },
        {
            label: 'Quit',
            icon: 'pi pi-fw pi-power-off'
        }
    ];

    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2"></img>;
    const end = <InputText placeholder="Search" type="text" className="w-full" />;

    return (
        <PrimeReactProvider>
           <Menubar model={items} start={start} end={end} />

        </PrimeReactProvider>
    )
}

Does anyone have a solution?

I attempted to apply a theme to a PrimeReact component with the expectation that it would display correctly. Unfortunately, the layout of the component was not as expected.

javascriptcssreactjsprimereact

Answer №1

Make sure to import all the necessary CSS files properly.

import 'primereact/resources/themes/lara-light-indigo/theme.css'; // theme
import 'primereact/resources/primereact.css'; // core css

Remember, the primereact.css is essential for the CORE CSS to work together with the theme.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for converting objects into arrays with JavaScript

I have an object and I would like to convert it into an array const object1 = { a: { hide:true}, b:{} }; I am currently using Object.entries to perform the conversion, however, I am struggling with understanding how it should be done. Object.entries ...

javascriptarraysobject

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Achieving a dynamic scrollable table that adjusts its height based on its parent container (HTML + Bootstrap)

I am trying to create a table that can be scrolled vertically using the standard overflow: auto property without specifying a set height for the table's container. While Bootstrap provides a class called table-responsive for handling horizontal scrol ...

htmlcsstwitter-bootstrapbootstrap-4

Order an array based on a specified list of fields

Imagine you have an array of objects: People = [ { "id": 1, "name": Joseph, function: "preacher"}, { "id": 2, "name": Ann, function: "singer"}, { "id": 3, "name": Miles, functi ...

javascriptangulartypescript

Implementing the Fixed Header feature in DataTables - A Step-by-Step Guide

I'm encountering an issue with implementing a fixed header for my table using the DataTables plugin. Despite previously asked questions addressing similar problems, I am still unable to resolve it. I suspect that conflicting CSS or missing CDN links c ...

htmlcssdatatables

A step-by-step guide on selecting a checkbox within an alert popup using Selenium with Java

Hello everyone, I am struggling to find a solution for checking and unchecking a checkbox located in an alert window or modal pop-ups. We have three types of pop-ups: alert, confirm, and prompt. Specifically, in the confirm popup, there is a checkbox t ...

javascriptjavaseleniumwebdriver

Difficulty in modifying border color using Material UI palette color within React.js

Currently, I am developing a customized side Navigation Bar in React.js utilizing MUI components with a distinctive right border design. https://i.stack.imgur.com/1uUL4.png const SideNav = () => { return ( <Stack sx={{ ...

reactjsmaterial-ui

One page experiences issues loading CSS due to MIME type, while a different page has no problem with it

I'm facing an issue with my express app that renders Mustache templates. The problem is related to the CSS not applying on one of the routes due to it being of MIME type text/html (as mentioned in the Chrome console). This is how I set up my express ...

cssnode.jsexpressmustache

The problem of having an undefined state in Vuex arises

https://i.stack.imgur.com/52fBK.png https://i.stack.imgur.com/GcJYH.jpg There is an error occurring: TypeError: Cannot read property 'state' of undefined ...

javascriptvue.jsvuejs2vue-componentvuex

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

javascriptpythonhtmlcssdjango

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

Currently, I am working on an app that utilizes the Geoapify API. Within this app, I have implemented three primary API functions. Users are presented with two options on the user interface: they can manually search for cities or utilize their current loca ...

javascriptreactjs

Is it possible to utilize AJAX and JavaScript exclusively for server-side scripting?

Currently in the process of learning PHP, I've decided to analyze the code using a language that I am more comfortable with as my approach. I'm attempting to recreate a PHP dashboard with features such as role management and session logging. Ha ...

javascriptphpajaxclient-side-scriptingserver-side-scripting

Utilizing Express-Partials in conjunction with a single layout to incorporate multiple partials

Recently, as I migrated to Node.js and ExpressJS 3.0, I noticed that partials were no longer supported. However, I stumbled upon express-partials which provided a similar feature. Upon exploring the example on their GitHub page, I came across this snippet ...

javascriptnode.jsexpresspartials

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

I am facing an issue with escaping HTML in my Extjs grid. I have used the following configuration : return Ext.String.htmlEncode(value); In the renderer of my column, this method works perfectly for simple HTML tags like h1, b, i, etc. However, if I in ...

javascriptjqueryhtmlextjs

Angular 4 scripts fail to execute after switching views

I am facing an issue with my Angular 4 app. All scripts work fine when the page is loaded for the first time. However, if I navigate to a different component within the app and then return to the main page, the scripts stop working. The console log shows a ...

javascriptangularwebangular-componentsangular-component-router

Building a Gatsby website with a PHP contact form

Currently, I am developing a Gatsby portfolio and my goal is to integrate a PHP contact form. While exploring various examples online, many of them suggest using external resources to handle email sending directly from the website itself. One such recommen ...

phpreactjsgatsby

An issue occurred when trying to access the version information from http://localhost:8088/web/webclient/version_info while logging in to the Odoo server using

While attempting to log in with my Ionic app to an Odoo server, I encountered the following error message. Is this due to CORS, and how can I configure my local Odoo server without using Nginx? XMLHttpRequest cannot load http://localhost:8088/web/webcli ...

javascriptandroidangularjsionic-frameworkodoo

Determine the selected option in the dropdown menu upon loading the page and when clicked

I am working on capturing the value of a drop-down list whenever it is changed or when the page loads. The aim is to display different div elements based on the selected option in the report field - either State or Year. Any assistance with this would be ...

javascriptjqueryhtml

Tips for showing error messages in response to exceptions

My function is supposed to display the response text that comes back from ex.responseText. However, every time I attempt it, it returns as "undefined" even though the text is there. onError: function (ex) { $('<div>' + ex._message + &a ...

javascriptjsonerror-handlingex

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

htmlcsshovervisibility