Adjust the design based on the prop value in Material-UI DatePicker using conditional CSS styling

I recently started working with react and I've encountered a new challenge that has me a bit stumped. My project is using react version 16, which is the version before hooks (I'm unable to update this as it needs to work within another program that only supports up to this version), and I am incorporating material ui.

Specifically, I am utilizing a date picker in this manner:

const styles = (theme) => ({
  textField: {
    color: COLORS.text,
    backgroundColor: COLORS.backgroundColor,
    '&:focus': {
      color: COLORS.text,
      backgroundColor: COLORS.backgroundColor,
    },
    '&:hover': {
      cursor: disabled ? 'disabled' : 'pointer',
    },
  },
});

class DatePickers extends Component {
  handleChange = (e) => {
    const { onChange } = this.props;
    const isPicked = e.target.value;
    onChange(this.props.value, isPicked);
  };

  render() {
    const { classes, partialDayKey, value, disabled } = this.props;

    return (
      <TextField
        id={`${partialDayKey}-datepicker`}
        type="date"
        disabled={disabled}
        name={`${partialDayKey}-datepicker`}
        value={value || '0000-00-00'}
        InputProps={{
          classes: {
            input: classes.textField,
          },
        }}
        onChange={this.handleChange}
      />
    );
  }
}

export default withStyles(styles)(DatePickers);

I am trying to alter the hover styling based on whether the disabled prop is true or false, but I can't modify it prior to declaring the props, nor can I relocate styles after the props due to its usage at the end of the file.

Not sure how to approach conditional CSS in this scenario. The error I encounter pertains to the unrecognized disabled keyword.

Answer №1

example snippet for accessing props

const customStyles = (theme) => ({
  textArea: {
    '&:hover': {
      cursor:(valueProps)=> valueProps.disabled ? 'disabled' : 'pointer',
    },
  },
});

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

Ways to adjust height dynamically to auto in React

I am currently stuck on a problem concerning the adjustment of my listing's height dynamically from 300 to auto. My goal is to create a post-like feature where users can click "read more" to expand and view the full post without collapsing it complete ...

Modify the card design when the screen is reduced in size and when the workspace is comprised of only two words

https://i.stack.imgur.com/jBqTE.png In my current project aimed at organizing tasks within companies, I am facing an issue with displaying a group of workspaces. The problem occurs when viewing the card changes its shape on a minimized screen, but only wh ...

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

Getting the URL of a CSS background image in NodeJS and Express: A step-by-step guide

I've recently learned that using getComputedStyle in a Node environment is not possible due to it being a browser-specific behavior. Despite this, I am still interested in retrieving all background image URLs within Node and downloading them as shown ...

The Bootstrap model popup darkens the screen, but there are a few areas that remain at the same level of brightness and do not get dim

https://i.sstatic.net/09QtK.png Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as ...

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

The leaflet map has been shifted away from the div container

I've been attempting to display a leaflet map within a div tag, but unfortunately it keeps getting displaced from the tag. https://i.sstatic.net/4fNkj.png Below is my angular directive implementation: import L from 'leaflet'; import esri ...

Tips for properly implementing setTimeout in React applications

I am currently dealing with the following code snippet: const Button = () => { const [numbers, setNumbers] = useState({ a: 10, b: 30, c: 100, d: new Date() }); const click = () => { setTimeout(click2, 2000); }; const c ...

Encountering issues when attempting to post JSON form data to a REST API via AJAX within a React

Recently, I created a basic SignUp page utilizing React and I am looking to transmit the form data to a REST API. In my setup, I have incorporated react.min.js, react-dom.min.js, and jquery.min.js. Here is the code snippet: <div id="container"></ ...

reactjs reusable component causing unexpected errors

I'm a beginner in UI development, trying to organize my components into separate files. This particular component needs to be used in another file. import React, { Component } from 'react'; import MuiThemeProvider from 'material-ui/sty ...

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Hey there! I could really use some help with a tricky situation I'm facing in my React Native app, specifically regarding camera integration. Here's the scoop: The Issue: I'm working on a video recording application using React Native that ...

Displaying hidden Divs in React Typescript that are currently not visible

I have an array with various titles ranging from Title1 to Title8. When these titles are not empty, I am able to display their corresponding information successfully. Now, my goal is to include a button that will allow me to show all fields. For example, ...

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

Ensure that the input value in the MUI autocomplete feature remains persistent after a selection has

When using Material-UI Autocomplete with Multiple, the entered value gets cleared after selecting an option. https://i.sstatic.net/TE9Iu.png Is there a method to maintain the inputted value even after making a selection? Similar to the example below... ...

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

I am experiencing unexpected routing behavior with NextJS and next-routes

I have compiled a routes.js file with the following content: const nextRoutes = require('next-routes'); const routes = module.exports = nextRoutes(); routes.add ('presenterallcurrent', '/presenter/:ccyear','speaker& ...

External style sheet link is not operational

Inside base.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Base</title> <style> body { background: blue; } </style> </head> <body> &l ...

Achieving www prefix enforcement for loading js file

I am facing an issue with the script on my website, which is built using OpenCart. The problem arises when accessing the site with a www prefix - the JavaScript file fails to load. However, when accessed without the www prefix (e.g. example.com), everyth ...

Use jQuery to place tags around the content of existing <li> elements

Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added). var item = $('<li>' ...