Adjust the background color of Ant Design button

I have seen similar topics on this issue, but I am struggling to find a solution that works for my specific situation. Despite trying the available information, I haven't been successful so far.

My current challenge is changing the background color of a Text button when the mouse hovers over it.

If I attempt to modify the backgroundColor style directly in the button's inline code, it ends up altering the entire area instead of just the intended part. It seems there is no way to add a :hover functionality inline (I am using TS, which displays an error even though the code compiles without any effect).

When using a SCSS module, I can once again change the entire background color. However, introducing the :hover functionality on the same property only seems to affect the text portion (refer to the screenshot provided).

Despite attempting to target the ant-btn-text more specifically, I have not achieved any success.

Does anyone have any suggestions? I would prefer to avoid creating a state variable for this if possible.

https://i.sstatic.net/N1JPP.png

Edit: added a section of code and CSS as requested in the comment https://i.sstatic.net/3CWFh.png

cssreactjsantd

Answer №1

In most cases, AntD classes will take precedence over your custom CSS styles. To override this behavior, you can employ the use of !important in your stylesheet.

Answer №2

      /


<ThemeProvider
  ...
  theme={{
  ...,
  
  components: {
    ...,
    tokenColor: {
        primary: "#c1a06a", //customize your primary color
       },
    Button: {
      background: "#2C2C2C", //adjust your button background color here
      borderColor: "transparent",
      boxShadow: "none",
      defaultShadow: "none",
      primaryShadow: "none",
      borderRadius: 4,
    },
  }

Answer №3

After some late-night searching, I finally discovered the solution and wanted to share it now. Upon revisiting my original post, I realized that using the & parent selector was crucial, along with adding !important to make it work.

In my situation, having:

.updateButton {
    &:hover:{
        background-color: red !important;
    }
}

successfully overrode the default styling. Grateful for the help!

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

Is there a way to connect a CSS stylesheet to a Spotfire analysis?

I've successfully added a Javascript script to my Spotfire page, but I'm struggling to incorporate CSS files. Does anyone have any tips or suggestions on how to do this? ...

javascriptcssspotfire

Switching button presses

http://jsfiddle.net/qVfy7/ HTML <div id='button'></div> <div id="mydiv">ko</div> JS $('#button').click(function () { $('#mydiv').text('ok'); }); CSS #button{ width:100px; he ...

javascriptjqueryhtmlcss

Creating animated keyframes with JavaScript and Jquery within a React environment

Currently, I am developing an animated feature within a react project. Specifically, the animation involves numerous dynamic bubbles. For each bubble, I require a rapid growth and shrink effect. Here is a snippet of how my css animation is structured: @k ...

javascriptjquerycssreactjs

Address the conflict with the upstream dependency, update react-share to work with React 18, Deployment unsuccessful on Netlify

Having trouble installing react-share on a React 18 project and experiencing deployment issues on Netlify. npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.3.0 || ^17" from <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

reactjsnpmdependenciesreact-share

Utilizing NextJs Webpack to incorporate NextJs project B into project A as a module or framework

In my latest project, I have developed Project B using NextJs as an independent module/framework. This project includes components/gui and css/scss files that are bundled into bundle.js with Webpack. Now, when installing Project B within Project A, the ex ...

cssnext.jswebpackbuildnextjs14

Adjusting the width of MuiInputBase-root: a step-by-step guide

I'm currently working on customizing a text input field, but I'm facing an issue with adjusting its width. Specifically, I need to modify the width of the class "MuiInputBase-root MuiInput-root MuiInputBase formControl MuiInput-formControl" as it ...

reactjsmaterial-ui

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

Creating consistent div sizes for varying image and title lengths in bootstrap

In my angular project, I am receiving data in the form of image, title, and location. Despite my efforts to create a responsive div, I have been unsuccessful in achieving uniform sizes. <div *ngFor="let company of companies" class=" ...

cssangularbootstrap-5

Leveraging the Link element dynamically within React Router

I want a specific component to be rendered with either a Link tag or a regular div tag based on a condition stored in the component's state. The current approach I'm using feels verbose and redundant, and I believe there must be a more concise wa ...

reactjsreact-routerreact-router-v4react-router-dom

Typescript: Variable of unspecified type

Within my generator function called foo(), I am making a request to an external API using the fetch method. Once I receive the response data from the API, I then parse it as JSON. Encountering an issue, as Typescript is triggering an error message: An Obj ...

reactjstypescriptfetchgeneratorredux-saga

Is there a way for my React Button Component to refresh its CSS exclusively on the current page?

I recently created a custom button component with the code below: const STYLES = ['btn--primary', 'btn--outline', 'btn--test']; const SIZES = ['btn--medium', 'btn--large']; const DISPLAY = ...

reactjs

Navigational systems in tabbed interfaces

In my current project, I am working on creating a tabbed list view that displays filtered users in each tab. However, I have encountered an issue with the pagination at the bottom of the page - it remains the same for all tabs and when I try to navigate th ...

reactjsmaterial-uiadmin-on-rest

DOMPDF struggles with rendering a font and instead displays circular shapes

After following the instructions in this guide: github.com/dompdf/dompdf/wiki/UnicodeHowTo I ran the load_font.php script, verified that the font files were successfully copied to /dompdf/lib/fonts, and ensured that the font information was added to the f ...

phpcsspdffontsdompdf

Hide only medium-sized elements with Bootstrap 4

In my latest online project, I decided to integrate Bootstrap 4. The main focus is on mobile users, but I also want to ensure desktop users have a good experience. However, I am facing difficulties in hiding certain texts on medium screens only using pred ...

csstwitter-bootstrap

Difficulty being faced in recognizing anchor tags through CSS selector methods by Mechanize

(Just wanted to check here since I didn't get much response on RailsForum lately.) Has anyone encountered issues with Mechanize not picking up anchor tags using CSS selectors? Here's a snippet of the HTML code: <td class='calendarCell& ...

ruby-on-railscssnokogirimechanizescreen-scraping

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar

Harnessing Internationalization in Vanilla JavaScript

I am currently working on a React project and have integrated internationalization using i18nexus. I am now attempting to utilize the translations in a regular JavaScript file. index.js ` import React, { Suspense } from "react"; import { Browser ...

reactjsi18next

Revising Global Variables and States in React

Recently delving into React and tackling a project. I find myself needing to manage a counter as a global variable and modify its value within a component. I initialized this counter using the useState hook as const [currentMaxRow, setRow] = useState(3) ...

javascriptreactjstypescript

What is the best method for incorporating separate CSS files for individual HTML templates within a Flask project?

I am embarking on a Flask project and want to keep things organized by having a separate css file for each html file. Most tutorials available online suggest placing all the CSS code in one /static/styles.css file. However, when I try to run the following ...

htmlcssflaskjinja2

What is the best location to store a ReactJS file?

As I dive into learning ReactJS Components, here is the code I am working with. Could someone please advise me on where to save this file or which folder I should keep it in? <body> <div id="anmol"></div> <script src="https: ...

node.jsreactjs