The Antd dark theme is causing a conflict with my custom CSS styles. What can I do to resolve this

ADDED antd to my new CRA project and customized some classes by overriding default antd CSS.

Then, I needed a dark-themed antd table component. Tried installing it via webpack but encountered failure. After switching to craco, successfully implemented the dark theme.

However, utilizing craco-less for the dark theme caused it to override my custom CSS styles.

Upon inspecting in the browser, noticed that my CSS was overriding the default antd styles while the dark theme was overwriting mine.

Has anyone else faced this issue before? Appreciate any help in advance!

cssreactjslessantdcraco

Answer №1

By following the instructions in antd's Customize-Theme guide, you can utilize a craco config file called craco.config.js to effectively override theme variables.

To achieve this, incorporate the below code snippet:

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Based on my experience, it is essential to use less files when overriding antd styles, so consider moving your custom styles into less files for better organization.

For a more detailed explanation, please refer to this insightful thread as well.

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

The system encountered an issue: the element type provided is invalid, it should have been a string for built-in components or a class/function for composite components, but it was undefined

Take a look at the results and code snippets in these files: https://i.stack.imgur.com/gEQNZ.png https://i.stack.imgur.com/QVEkY.png https://i.stack.imgur.com/nHUe9.png ...

reactjsmaterial-uireact-fullstack

When a React Native TextInput is focused, it restricts the ability to press other child components

Issue with Nested TextInput component affecting onPress function of other components. Press only works when the TextInput is not in focus. React Native Version : 0.66.3 Here's the code snippet: export const Component = (props): JSX.Element { const ...

reactjstypescriptreact-nativetextinputreact-native-component

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Just had a quick question. Is anyone familiar with how to achieve something similar using Firebase JavaScript v9? Essentially, I have a `userDoc` that is a DocumentSnapshot and I need to access a sub-collection with the document snapshot. Here's the c ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

What is the best way to properly configure axios testing in a React application?

Struggling with testing axios in React - any help? This is my current test.js file attempt: jest.mock('axios'); describe('RssFeed', () => { let component; let data; beforeEach( () => { data = data { data: {...} ...

reactjsjestjsaxiosenzyme

An issue arose in ReactJS when trying to utilize the GraphQL API

Struggling to incorporate the graphql API into a react js application. Uncertain if this approach is correct. import React, { Component } from 'react' import "./styles.css"; import axios from 'axios'; const appBaseUrl = axios.create({ ...

javascriptreactjsreact-nativereact-routergraphql

unable to toggle collapse functionality of bootstrap 3 navbar

My navbar was recently modified, but now the toggle button is not responding when clicked. Here is the code I am using. Can someone help me find the mistake? CODE: <body> <div class="navbar-wrapper"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrap

Issue encountered while accessing theme properties in a ReactJs component with Typescript

I am trying to pass the color of a theme to a component in my TypeScript project (as a beginner). However, I have encountered an error that I am struggling to resolve. The specific error message reads: 'Parameter 'props' implicitly has an ...

reactjstypescriptstyled-components

css issues with setting background colors

I am in the process of updating the header on a website, and I want the entire header to have a light gray background. My initial approach was to set the background-color of the main header div to gray (E7E7E7), but for some reason, there is now a white sp ...

htmlcss

The document inside the database is displayed in italicized text when it is stored in Firebase

try { // establish a new collection named 'pactLists' const pactListsCollection = collection(db, "pactLists"); // used for storing records of created pacts by users. // generate a unique id for the pact and set it as the invite c ...

javascriptreactjsfirebasegoogle-cloud-firestore

Issue with integrating Bootstrap-5.1 dropdown functionality into a React project

Currently, I am in the process of learning React and I have been experimenting with using Bootstrap for styling purposes. I have encountered difficulties while trying to implement a dropdown menu. Despite researching numerous Stack Overflow posts on this ...

reactjsbootstrap-5

Utilizing Local NPM Dependencies

As a newcomer to React, I am eager to incorporate react-emoji-react into my single-page application without using Node.js. Is it possible for me to achieve this? This is the basic React code that I currently have: <!DOCTYPE html> <html> & ...

node.jsreactjsnpm

I am curious about why I am unable to utilize inline functions in component props. Could you please provide a detailed explanation and perhaps give an example to illustrate? Furthermore, what is

Please take note: The component prop accepts a component, not a render function. Do not pass an inline function (e.g. component={() => }), as this will cause your component to unmount and remount, losing all state when the parent component re-renders. F ...

javascriptreactjsreact-nativereact-navigation-v5react-navigation-stack

When React-Select is modified, React-hook-form does not update the form's validity

I am working with a react-hook-form and a react-select component: Whenever I change the value of the react-select, the form is marked as dirty and valid. This enables the submit button, allowing me to send the form. After sending the form, the defaultValu ...

reactjsreact-selectreact-hook-form

Assigning background colors based on the data stored in a specific field of a MySQL database

I have successfully implemented a Ticketing System using PHP and MySQL database. The view tickets page displays each ticket from the database along with its priority level, which can be Low, Normal or High. Currently, the priority value pulled from the d ...

phpmysqlcss

What is the process for adjusting the checkbox border color in Material Design 15 and above?

Ever since the latest update to Angular Material 15, I've noticed some changes in how styling is applied to Angular Material components. Previously, in version 14, I used to be able to accomplish styling changes with code like this: ::ng-deep .mat-che ...

cssangular-material

How to display an object in JS format using React?

Currently, I am tackling a project that presents me with the following situation: myjson: { completeName: "my name is {this.state.myName+ " "+this.state.surname}" } component.js var Component = React.createClass({ getInitialState: function() { ...

javascriptjsonobjectreactjsreactjs-flux

What is the best way to utilize my React VITE environment variables when deploying to a production Azure Static Web App?

At my local environment, I typically use a .env file and follow this process: const value = import.meta.env.VITE_VALUETOGET console.log("value", value ) However, when I switch to production, I utilize the Azure portal configuration app settings and add VI ...

reactjsazureenvironment-variablespipelinevite

Display modal scroll functionality when a modal window is activated

Can someone explain to me why my solution isn't working? I'm trying to hide the scroll on my page when a modal is opened and allow scrolling within the modal. It would also be great if there could be a slide up & down effect. I attempted to achi ...

javascripthtmlcssscrollmodal-dialog

Repetitive notifications using Jquery

Utilizing the CSS and HTML code below to showcase a notification whenever an event takes place. HTML <div id="notification_wrapper"> <div id="notification"></div> </div> CSS #notification_wrapper { position: f ...

jqueryhtmlcss

What is the limit of migrations in Realm DB?

Currently, I find myself in a situation where I need to make frequent alterations to a database schema. I am contemplating the pros and cons of either deleting and re-creating the entire realm or simply deleting objects, migrating, and then re-creating the ...

reactjsmigrationrealmnative