Unable to modify the main button color using LESS in the ant.design framework

I am experiencing an issue with using ant design to style a primary button. I have tried to change the background color using LESS, specifically by setting @btn-primary-bg: #1B2F55, but for some reason, it does not work. I know I could easily change the background color using style={{background-color}}, but I prefer to work with LESS. I have successfully set the primary color for all text, so I'm not sure why this particular issue is not working.

@btn-primary-bg: #1B2F55;

  <Button type='primary' onClick={this.handleSubmitEmail}>{submit}</Button>

antd.customize.less

enter image description here

cssreactjsless

Answer №1

If you want to customize the style of antd's button class, you will need to access it.

Simply add a new class name to your button component like so:

 <Button type='primary' classname={'my-button'} onClick={this.handleSubmitEmail}>{submit}</Button>

Next, in your LESS file, add the following code:

.ant-btn.my-button{
  background-color: 'red'
}

Answer №2

After some investigation, I discovered that the issue stemmed from using a project originally created by someone else. In the app.css file, there was a conflicting color setting for the primary element which led me to delve deeper into understanding CSS priorities.

Answer №3

One way to implement a button with specific styling is to utilize the following code:

<Button htmlType="button" type="primary" id="turf-button" disabled={bnstate} shape="round" size="small" onClick={onconnect}>

Afterwards, you can apply the following CSS:

#turf-button {
  background-color: lime;
}

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

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

javascriptcssreactjsnext.js

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

javascripthtmlcssbootstrap-4jquery-chosen

Limit the number of MapStateToProps calls in connected components with throttling

In my React application, I have integrated a Redux store that connects to a websocket and presents the received information in a table. Additionally, I have implemented RxJs middleware to interact with the websocket, dispatch actions, process them in reduc ...

reactjsreduxreact-reduxrxjs

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

javascriptjqueryhtmlcssresponsive-design

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference: HTML <div id="boxes-wrapper"> <div class="box"></ ...

javascriptjquerycssgoogle-chromeanimation

Using an empty array in React UseEffect will prevent the return function from being triggered

Trying to incorporate a return function within the body of useEffectF in order to implement specific logic has presented some challenges. It seems that when an empty array of dependencies is used, the returned function is not being called as expected. u ...

reactjsreact-hookscomponentsuse-effect

Why won't my button's text resize?

I am facing an issue with my button's CSS code. In Chrome, when I resize the window to view the mobile layout, the text overflows outside of the div. a.syntra-green-button { background-color: #6faf3c; border: 1px solid #9dcc77; color: w ...

htmlcssgrid-layout

Header and Footer Components in ReactJS

My goal is to design a unique Layout component that will display the Header and Footer. This way, I can later use the Layout like <Layout> ... </Layout> In order to achieve this, I have utilized Routing in both the Header and Footer. To imple ...

javascriptreactjsheaderfootermaterialize

Using React Hooks and Typescript to make a POST request with Axios

I'm currently working on developing a simple subscription component that allows users to subscribe to a service by entering their email address. However, I am facing some challenges in inputting my data correctly. I am exploring React with Hooks and T ...

reactjs

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

Is there a way for me to send the selected option from a Material UI autocomplete field?

I have successfully integrated Material UI and set up autocomplete options from JSONPlaceholder. Everything is running smoothly with the following code: const [value, setValue] = useState([]); const [inputValue, setInputValue] = useState('&ap ...

reactjsformsmaterial-ui

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

javascripthtmljquerycss

What is the process for defining an outcome when a draggable element is placed into a droppable area using Jquery?

Currently, I am working on a task where I need to increase the value of a counter (var counter = 0;) every time a draggable image is dropped into a dropzone, which is also an image rather than a div. $( "#goldbag" ).draggable({ revert: "invalid", containm ...

javascriptjqueryhtmlcssjquery-ui

Tips for utilizing Redux to send product IDs with a count in React Native for an ecommerce application, similar to the functionality of an

Creating a platform similar to eCommerce where I aim to include the functionality of adding items to cart and displaying the count on the icon. The count should also show the product based on the ID stored in an array. Here is my reducer code: cons ...

reactjsreact-redux

Tips on changing the default value of a Material UI prop method in React JS

Currently, I'm utilizing React JS and I've brought in a component from Material UI known as (https://material-ui.com/api/table-pagination/). My goal is to customize the Default labelDisplayedRows that looks like this: ({ from, to, count }) => ...

javascriptreactjsmaterial-ui

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...

htmlcssangularresponsive

Node.js impressively stores files without file extensions

app.post('/file_upload', function (req, res) { var form = new formidable.IncomingForm(); form.uploadDir = path.join(__dirname, '/uploads'); files = [], fields = []; form.on('field', function(field, ...

node.jsreactjsexpressfile-uploadformidable

Displaying a list of data separately in rows using React JS

I am encountering an issue with React Js. I need to display names data in individual rows. const names = ['James', 'John', 'Paul', 'Ringo']; Here is my code: return ( <div class="col-lg-8 bar-name"> ...

javascriptreactjsfunction

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

javascriptreactjscssmaterial-designmaterial-ui

Click on the entire Material-UI formControlLabel to select it, not just the text

I have recently started working with the material UI. Currently, I am dealing with a form that looks like this: <FormControl variant="outlined" className={css.formControl} margin="dense" key={"abc_" + index} > <FormControlLabel cont ...

javascripthtmlreactjsmaterial-ui