Employing conditional statements in conjunction with styled components

Is there a way to style my PaymentBtn with the main styled Button but only apply the hover effect when the isLoading prop is activated, without changing anything else? I want the styling to remain the same except for the hover effect.

Basic button

export const BaseBtn = styled.button`
  min-width: 165px;
  width: auto;
  height: 50px;
  letter-spacing: 0.5px;
  line-height: 50px;
  padding: 0 35px 0 35px;
  font-size: 15px;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-family: "Open Sans Condensed";
  font-weight: bolder;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
  }
`;

PaymentBtn styles

export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;
`;

I am looking for something similar to this but I am not sure how to implement it with styled-components

export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

&:hover {
 ${({isLoading}) => isLoading ? 
  hover:{
    background-color: "gray" : "black"
  }
}
`;
cssreactjsstyled-components

Answer №1

Consider giving this a shot:

export const PaymentButton = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

  &:hover { 
    background-color: ${props => (props.isLoading ? 'gray' : 'black')}
  }
`;

When isLoading is true, hovering will display the color gray, otherwise it will be black. To have no color on false, set it to transparent.

Answer №2

const StyledButton = styled.button<{loading: boolean}>`
....
  loading && ::hover {
    background-color: darkgray;
....
  }
`

This approach seems promising

Answer №3

I stumbled upon a successful technique and am eager to learn about other solutions that have worked for you.

const HoverEffect = css`
  &:hover {
    background-color: gray;
  }
`;
export const StyledButton = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

  ${({ isLoading }) => isLoading && HoverEffect}
`;

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

Eslint has encountered a parsing error, it was not expecting that token

I encountered the issue Error: Unexpected token .. raised by eslint while working with this code snippet. Can anyone spot what's causing it? const Public = ({ loggingIn, authenticated, component, ...rest }) => ( <Route {...rest} render={(pr ...

javascriptreactjseslint

css - align the arrow to the right in a dropdown

I recently started using a Bootstrap dashboard template created by Creative Tim. I am attempting to incorporate a dropdown list into a table cell, following the standard Bootstrap format: <div class="btn-group"> <button type="button" class="b ...

csstwitter-bootstraptwitter-bootstrap-3

Tips for ensuring that the footer remains at the bottom of the content and stays fixed at the bottom of the viewport

In my Django project, I am using Bootstrap 4.5 and I need the footer to be in one of two positions: 1- At the bottom of the content if the content is larger than the view height 2- At the bottom of the viewport if the content is smaller than the view hei ...

htmlcssbootstrap-4footer

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...

jquerycsshtmlrel

Transferring data between components in React by passing parameters through Links

When calling another component like <A x={y}/>, we can then access props.x inside component A. However, in the case of calling EditCertificate, the id needs to be passed to the component. I am using a Link here and struggling to pass the id successf ...

javascriptreactjstypescriptuser-interface

The child component remains static and does not update when the parent component's state is modified

I am encountering a particular issue with one of my components. This component is responsible for rendering other components within it. One of these inner components takes state variables from its parent component as parameters and actively uses them, but ...

reactjsreact-hooksstatererender

Bootstrap datepicker embedded within a modal will scroll along with the parent page, rather than the modal itself

I recently encountered an issue with a bootstrap template where I needed to incorporate a datepicker within a modal. The modal contains scrollable content, but when I clicked on the datepicker field and scrolled the page, the datepicker moved with the pa ...

twitter-bootstrapcssbootstrap-modalbootstrap-datepicker

Disappear the loading icon once all children have finished rendering

I'm facing a minor issue with rendering in React and struggling to find a solution. Here's what's happening: My component acts as a wrapper for multiple entries, like this: class MyWrapper extends Component { renderItems() { return ( ...

javascriptreactjs

Adjust the height setting of the React-Highcharts viewport

My initial configuration for highcharts looks like this:- function getInitialHighChartsConfig(chartType) { return { credits: false, chart: { type: chartType, height: 325, }, title: { text: '', useHTML: tr ...

javascriptreactjshighcharts

What is the best way to give a fixed height to Card content in Material UI? Is CSS the way to go?

I've been struggling with a design issue involving Material-UI cards used to display News. The problem arises when the paragraph section of the card occupies multiple lines of text. When it spans two lines, there is a 10px spacing between the paragrap ...

javascriptcssreactjsmaterial-uimaterial-design

The suspense fallback feature seems to be missing in NextJS 13 when using the useRouter() for navigation

Seeking to update the search parameters of a route using the useRouter hook. I have created a basic program to demonstrate this. //page.tsx import { Suspense } from "react"; import ClientComponent from "./client-component"; import Serve ...

reactjsnext.jsnext.js13

Utilizing jQuery to generate dynamic nested divs within the ul li tags

I am looking to dynamically generate nested divs within a ul li. The goal is to create the following structure programmatically: <ul> <li> <div class="videoThumbnail"> <img src="./img6.jpg" /> &l ...

javascriptjqueryhtmlcss

Establishing a link to MongoDB through the use of mongoose

Currently, I am utilizing the Gulp build system. Upon attempting to establish a connection to my local MongoDB through mongoose, an error message displaying "mongoose.connect is not a function" appears. The snippet of code used for connecting is as follow ...

node.jsmongodbmongoosereactjsgulp

Adjusting the Z-index of the autocomplete dropdown and exploring the functionality of getOptionSelected

I'm currently working on integrating the Autocomplete material ui widget into my web application, but I'm facing an issue where the drop-down menu appears behind my edit panel. While I can still use my arrow keys to navigate and select options, i ...

reactjsmaterial-ui

AWS-ECS Deployment encountered a 404 error: Resource Not Found

I am encountering an issue while deploying a microservice to my ECS cluster. Here is the breakdown of the services running on my cluster: 6 Java services (ECS services) 2 Python services 1 React service I have configured ALB for routing my requests based ...

javareactjsamazon-web-servicesnginxamazon-ecs

Finding the parent div in the handleChange function using React

I am facing a challenge with multiple dynamic divs, as their number depends on the filter selected by the visitor. This makes it impossible to use getElementById in this scenario. My goal is to modify the parent div's CSS when an input is checked. B ...

javascriptreactjstailwind-css

Encountering a problem in a NextJS application where an error occurs stating "cannot read property of undefined (reading setState)" within

In an attempt to resolve the issue, I have linked the method to this inside the constructor. Additionally, I have utilized the arrow function technique to address the problem at hand. Despite these efforts, I continue to encounter the following error: Unha ...

javascriptnode.jsreactjsnext.jsjsx

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

How can I link a textarea to a POST request in React?

Is there a method to link the textarea with my POST request in order to modify values and transmit the data as .json? ...

reactjsjsonhttp-post

Exploring React's componentWillReceiveProps method with the power of Enzym

Today, I am exploring the testing of lifecycle functions such as componentWillReceiveProps using enzyme. In order for my component to function properly, it needs to be styled with materialUi styles and connected with redux. This is essential to avoid any ...

unit-testingreactjsmaterial-uijestjsenzyme