Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work.

The code for my component is as follows:

<ExpansionPanel>
  <ExpansionPanelSummary
    className={classes.expansionPanelSummary}
  >
    ....rest of the code...
  </ExpansionPanelSummary>
</ExpansionPanel>

Here is my styles.js:

expansionPanelSummary: {
    cursor: 'default',
    '&:hover': {
      cursor: 'default'
    },
    padding: theme.spacing(1, 3, 1, 3)
}

https://i.stack.imgur.com/TUtyL.png

Upon inspecting the page, the CSS shows cursor: "default", yet the cursor behavior remains unchanged.

cssreactjsmaterial-ui

Answer №1

Your current issue lies within this specific CSS selector:

.MuiExpansionPanelSummary-root:hover:not(.Mui-disabled) {
    cursor: pointer;
}

It seems to be overriding the cursor: default property that you are attempting to apply.

To address this, consider utilizing the createMuiTheme function and implementing the following adjustments:

const customTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        "&:hover:not(.Mui-disabled)": {
          cursor: "default"
        }
      }
    }
  }
});

For a practical demonstration, check out this live example: https://codesandbox.io/s/expansion-cursor-change-ywqq5?file=/demo.js

Answer №2

It seems like the issue lies within material-ui's handling of styles. You can attempt to resolve it by using the code snippet below:

<ExpansionPanel>
  <ExpansionPanelSummary
    classes={{root: classes.expasionPannelSummary}}
  >
    ....remaining code...
  </ExpansionPanelSummary
</ExpansionPanel>

Refer to the component's API documentation and learn about how to customize styles in material-ui.

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

Error: Unable to locate module: '@material-ui/core/Breadcrumbs'

Recently, I incorporated React's Material UI into my project and attempted to integrate the Breadcrumbs component. However, I encountered an error message stating: Cannot resolve '@material-ui/core/Breadcrumbs'. I have already installed @m ...

reactjsmaterial-designmaterial-ui

When using React, it is common to nest multiple map or filter functions inside each other for

Is it possible to execute a map or filter within another map function? I am working with JSON data that contains a menu structure. My goal is to iterate through the JSON and check if the first level has any children. If there are child elements, I want t ...

reactjs

Is it advisable to save the text that is utilized in a label?

My journey into web development is just beginning, and I am currently using React JS for my front end development. I have a component that dynamically renders labels based on JSON data, This is how the JSON data looks: data:{ name:"test123" ...

javascriptjsonreactjs

Icons are failing to display in the dropdown menu of MUI after an option is selected in ReactJS

There seems to be an issue with the icon in the select tag. Initially, it is not showing which is correct. However, when you click the dropdown, the icon appears as expected. But after selecting an option, if you click the dropdown again, the icon disapp ...

javascriptreactjsmaterial-ui

Error: The 'Store' property is not found in the '{}' type but is needed in the 'Readonly<Istore>' type. TS2741

Can you assist me in resolving this issue? I am attempting to pass my store as props to the component, but I keep encountering the following error: Type error: Property 'Store' is missing in type '{}' but required in type 'Readon ...

reactjstypescriptmobx

What are the steps to allow access to react-native-camera after initially denying permission?

When you first launch the app and go to the camera, a Permission modal pops up on Android or iOS with the options of allowing or not allowing access. The react-native-camera package is used in this scenario. It includes a property called notAuthorizedView ...

androidiosreactjsreact-nativereact-native-camera

React's connect method is causing issues with my test case

Attempting to create a test case for my jsx file... Took a sample test case from another jsx file... The other file does not have the connect method... But this new file contains the connect method... Believe this is causing issues with my test case... Any ...

javascriptjqueryangularjsreactjsmocha.js

Implementing MemberStack for user authentication within a Next.js application by leveraging the functionalities of NextAuth.js

In my current Next.js app with NextAuth.js, I am utilizing MemberStack for authentication. While it may not have been my top choice of tools initially, I am transitioning from a Webflow site that already uses MemberStack for auth. The new site I'm bui ...

reactjsnext.jsnext-auth

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the ...

htmlcsstwitter-bootstrap

Exploring React-Router Version 4: A Comprehensive Guide to Lists, List Items, Routes, and Eye

Recently, I encountered a challenge with React Router v4. It may not be a major issue, but I am unsure of the correct approach to handle it effectively. Here is what I am trying to achieve: <Route path="/" component={List}> <Route path="/lis ...

reactjsanimationshared-element-transitionreact-router-v4

What is the best way to pass the username and token data from a child component to its parent component

Hey, I'm currently working on a login app in React where the login component is a child of the app. My goal is to send back the username and token to the parent component once a user is logged in, so that I can then pass this information to other chil ...

reactjstypescript

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

javascriptjquerycsshtml-table

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascriptandroidjquerycssscroll

Retrieving the value of the react-calendar once it has been transferred to a different component

How can I retrieve the date value from the react-calendar component that is passed from the Calendar to the Input component? I need to access this date once it is sent over. import React from "react"; import Calendar from "./Calendar"; ...

reactjs

Working with Material UI: How to access child nodes in the <List> component

Imagine I have a hidden cart in my online shop that only appears when I click on the cart icon. Inside the cart, there is a List component containing three items that I have added: <List > <p>item1</p> <p>item2</p> ...

reactjsmaterial-uimaterial-design

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

My website features several lists that have this format: > lorem ipsum I am trying to style them like this: > lorem ipsum If anyone can provide guidance on how to rephrase the question I am asking, I would greatly ap ...

htmlcss

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Hi, I'm having an issue with creating a fixed header using HTML and CSS. When I set my header to be in a fixed position, it covers up the content below it. I want the content to be positioned under the header when the page is loaded. Additionally, I&a ...

javascripthtmlcss

Converting an object into an array using React and TypeScript

Extracted from a form is an object with input, output, and outputType fields that can vary between number, string, and boolean types. To display the information in a table without the output type, I have created a mapped obj. However, I also need to prese ...

reactjstypescriptdictionaryobject

Is there a way to eliminate the "Use different Apple ID" option when setting up Sign in with Apple on a Reactjs + React Native App?

Currently working on integrating Sign in with Apple into my React Native + Reactjs frontend stack. The challenge I am facing is wanting to eliminate the "Use a different Apple ID" option, similar to how Binance has achieved it in their implementation (fir ...

javascriptiosnode.jsreactjsreact-native

Adjust the width of the dropdown menu in React-Bootstrap to match the width of the dropdown when changes occur

How can I dynamically set the width of a dropdown menu to match the size of the whole dropdown when it changes? Is there a way to get the width of the dropdown itself? I attempted to align the dropdown menu to the "end" which caused it to be right aligned ...

reactjsreact-bootstrap