Changing the Color of Components and Pages

To modify the color and CSS of components and pages in PrimeReact, you can utilize a theme.scss file with CSS variables. This approach enables you to establish color variables within your SCSS file and implement them across your components.

Component Level Customization

There are two methods to alter the color and CSS properties of components:

• Overriding existing theme variables
• Using custom classes

Page Level Customization

• Page Level Customization

Overriding existing theme variables

PrimeReact is a widely used CSS framework that leverages Sass variables for theming customization. To alter the color of a component, you can override the predefined Sass variables within your own theme.scss file.

1. Open _variables.scss file of primereact viva-light theme library from src>css>themes>viva>viva-light>_variables.scss.
2. To customize a component within a file, search for the specific component you wish to modify. For instance, a button.
   
3. To override the variable style, copy the necessary elements. For instance, to change the button's background and text color, use the following example.
   
4. Paste the code into the theme.scss file and change its value.
   

Using Custom Classes

Using custom classes is a more targeted approach, allowing you to change the color of specific components without affecting the entire application. This method is useful when you need granular control over individual elements.

Below steps provide an example of custom classes with button component. 

1. Update theme.scss File
   
   .custom-button {
   background-color: #000000; /* Black background */
   color: white; /* White text */
   border: none; /* No border */
   padding: 10px 20px; /* Padding */
   text-align: center; /* Centered text */
   text-decoration: none; /* No underline */
   display: inline-block; /* Inline-block display*/
   font-size: 16px; /* Font size */
   margin: 4px 2px; /* Margin */
   cursor: pointer; /* Pointer cursor on hover */
   border-radius: 4px; /* Rounded corners */
   }
   .custom-button:hover {
   background-color: #45a049; /* Darker green on hover */
   }
   
   Below screenshot is for reference purpose:
   
2. Apply the custom class to a button Component:
   
   <Button className="custom-button">Custom Button</Button>
   
   
   Below screenshot is for reference purpose:
   

Page Level Customization

To modify an existing SCSS file in a PrimeReact project, please follow the steps below:

1. Locate the SCSS File:
   Identify the SCSS file for the page you wish to alter.
   Typically, this file is located in the src/css directory or a styles folder within your project.
2. Modify the page SCSS File:
   For instance, to override button styling in the ProductCatalog.scss file, use the !important rule if necessary.
   
   .p-button {
   background-color: #007bff;
   border-color: #007bff !important;
   }

Related Topics

Changing the Theme of Application
Creating a New Page in React Project
Creating Reusable Components in React