Utilizing CSS selectors with the withStyle higher-order component (HOC) provided by Material

Currently, I am implementing material-ui in my Reactjs project and have opted to use withStyles HOC for styling my components. However, I am facing an issue with translating complex CSS selectors to React Style.

const Styles ={
  label :{
      width:"100%"
  },

  cardInputRadio:{
      display:"none",
      '&:checked + .cardInput': {
        color: 'green',
        display:"block"
     }
  },

  cardInput:{
      margin:"10px",
    '&:hover': {
        cursor: 'pointer',

     },
    'cardInputRadio:checked+ &':{
        color:'red',
     }

  },
  container:{
      flexGrow:1,
  },
  card: {
    minWidth: 100,
    width:300,
    display:"inline-block"
  },

     title: {
      fontSize: 14,
     },

   } ;

This is what I'm currently working on, utilizing the following approach:

export default withStyles(Styles)(MyComponent);

I am attempting to convert this CSS to react Style:

.card-input-element:checked + .card-input {
     box-shadow: 0 0 1px 1px #2e0071;
 }

The goal is to change the card's color when the radio button is checked, but it seems challenging with Material UI style HOC. Any suggestions would be greatly appreciated!

cssreactjsmaterial-ui

Answer №1

To incorporate conditional styles into your code, utilizing the classnames library can be beneficial.

If your component contains a 'checked' prop, the styling would look something like this:

cardInputRadio:{
  display:"none"
},
cardInputRadioChecked: {
  color: 'green',
  display: 'block'
}

Incorporate these classNames into your component in a similar fashion:

import classNames from 'classnames'

const MyInputRadioComponent ...
  const { checked } = props
  const classNames = classNames({
    [styles.cardInputRadio]: true,
    [styles.cardInputRadioChecked]: checked
  })

  return <YourRadioComponent classNames={classNames}/>

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

Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...

javascriptjqueryhtmlcss

Tips for updating a list in React Native after making changes

One issue I encountered while using a React Native component for selecting images is that it only displays the image selected the first time. If you choose an image from the gallery, close the selector, and then try to select another image, the new one doe ...

javascriptreactjsreact-native

Identify the corresponding IDs for each collection in the database

Within my database, I have several collections that are linked by their unique ID's to display relevant event(s). However, there is one specific collection that I am struggling to associate with the others. This collection is named events and each ev ...

javascriptreactjsredux

Having issues with Yarn build - encountered a failure due to an early process exit

When attempting to execute yarn build within a Docker node, an out of memory error is encountered. Error Image node --version v14.7.0 yarn --version 1.22.10 Error message The build process failed due to premature termination. This likely indicates ei ...

node.jsreactjsnpmbuildyarnpkg

Traverse through the loop with React Material UI in JavaScript

Hi everyone, I'm having trouble with this code. I want to iterate through an object called paleogenome.data and create a CardHeader for each item: { Object.keys(paleogenome.data).forEach(function (key){ console.log(paleogenome.data[key] ...

javascriptreactjsreact-routermaterial-uireact-hooks

What is the best way to create a time sequence canvas player?

Currently, I am working on a JavaScript feature that involves displaying a player's path on top of a static map. I have a sequence of timestamps and x,y coordinates, and I am searching for a library that can use this information to create a video play ...

javascriptreactjsvue.jscanvashtml5-canvas

Determining if a Website is Responsive with PHP

One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...

phphtmlcssresponsive-design

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

"Exploring the versatility of Flask, Python, and dynamic css

Currently, I am working on developing an online random color generator using Python and Flask. I have successfully created a function that generates a random hex color code. However, I am facing difficulty in passing this color code into the CSS background ...

pythoncssvariablesrandomflask

I'm experiencing an issue with the display of my Pop Up Window

I'm currently working on a website redesign project just for fun. One issue I've encountered is with a pop-up window that appears after clicking a button. Unfortunately, the layout of the window and button is quite strange - the button is positio ...

javascriptjqueryhtmlcss

Just getting started with web scraping - can CSS images be found using their path?

I am a beginner in the world of web scraping and I am struggling with understanding even the most basic concepts of web scraping and web selectors. Can CSS images be located using XPath (with selenium)? I am aware that it is possible to locate HTML image e ...

htmlcssseleniumxpath

Marking a task as completed in a React application will also mark the task immediately underneath it as done

Currently working on a React-based to do list app, I've run into an issue where checking off one item causes the one below it to also be checked: https://i.stack.imgur.com/fxitJ.gif Even after trying to introduce a delay between checking off the ite ...

reactjsmaterial-ui

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

javascriptreactjstypescriptnext.jserror-handling

Error in Next.js when trying to use Firebase Cloud Messaging: ReferenceError - navigator is not defined in the Component.WindowMessagingFactory instanceFactory

Currently, I am in the process of setting up push notifications with Firebase in my next.js application. I have been following a guide from the documentation which you can find here: https://firebase.google.com/docs/cloud-messaging/js/receive?hl=es-419 Ho ...

reactjstypescriptfirebasenext.jsfirebase-cloud-messaging

Issue with spacing dropdown choices within primary navigation bar

Struggling with my final project for a class as the semester comes to a close. I've received minimal help from my Professor and hit a roadblock. The main navigation on the side is working correctly, but the dropdown options are stacking on top of each ...

htmlcss

Strategies for monitoring user login activity in NextAuth to display a button

After exploring, I discovered that Next Auth offers various methods for tracking user authentication. By utilizing useSession (Client-based) Through getServerSession (Server-based) Now, suppose I want to display login and logout buttons based on the user ...

reactjsauthenticationnext.jsnext.js13next-auth

How to turn off double tap zoom feature in Safari on iOS devices

As I work on developing my web browser game, I encountered an issue with Safari iOS where double tapping triggers a magnifying glass feature: https://i.sstatic.net/B2y2L.png I have been trying to disable this feature but so far, no luck. I attempted usin ...

javascripthtmlcssaccessibilitymobile-safari

What is the best way to determine the width of the browser in JavaScript?

I'm attempting to create a JavaScript function that retrieves the current browser width. After searching, I came across this method: console.log(document.body.offsetWidth); However, it doesn't work well if the body width is set to 100%. Are ...

javascripthtmlcss

Buttons surrounding the image are exhibiting varied responsiveness

This is my initial inquiry. In the application I'm working on with rails and bootstrap, I've noticed that when the screen size changes to small, the elements around the image do not adjust properly like they do on a medium or large screen. Here ...

htmlcssruby-on-railsrubytwitter-bootstrap-3

Tips on attaching a click event listener to Nav.Link component in React Bootstrap

return ( <Navbar bg="dark" variant="dark"> <Navbar.Brand href="/">Instagram</Navbar.Brand> <Nav className="mr-auto"> <Nav.Li ...

htmlreactjsreact-bootstrap