I tried adding the css hover property to disable the button's hover effect, but it doesn't seem to be working for my situation. How can I go about resolving this issue?
import Button from 'material-ui/Button'
import styled from 'styled-components'
const StyledButton = styled(Button)`
&:hover {
background: none;
}
`
export const SubmitButton = ({ onClick }) => {
return (
<StyledButton
variant="raised"
onClick={onClick}>
login
</StyledButton>
)
}
To tackle this issue, simply incorporate an inline style.
const Button = ({ handleOnClick }) => {
return (
<StyledButton
variant="raised"
onClick={handleOnClick}
style={{ backgroundColor: 'transparent' }} >
login
</StyledButton>
)
}
Consider making it blend in with the background color:
layout = {
backgroundColor: "#FFF"
"&:hover": {
//ensure this matches the backgroundColor set above
backgroundColor: "#FFF"
}
}
Here is a potential fix for version 5 if anyone finds it useful
<CustomButton
disabled
disableTouchRipple
size="smallest"
sx={{
marginLeft: 1,
"&.MuiBuoyantElement-root:hover": {
background: "clear"
}
}}
>
</CustomButton>
To remove the background of the button completely, you may want to consider setting it as none
button: {
'&:hover': {
background: 'none',
},
}
To update the style, you can utilize a styled component like this:
const CustomStyledButton = styled(Button)`
&:hover {
background-color: transparent;
}
`;
Everything seems to be in order
const CustomButton = styled(Button)`
&&.MuiButton-root {
&:hover {
background: none;
}
}
`
To remove the hover effect on a material-ui button, you can include the following details within the component. I recently implemented this for a Switch button.
disableRipple
style={{ backgroundColor: "transparent" }}
import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";
const styles = {
};
class SwitchLabels extends React.Component {
state = {
checked: true
};
handleChange = (event) => {
this.setState({ checked: event.target.checked });
};
render() {
return (
<FormControlLabel
control={
<Switch
classes={this.props.classes}
checked={this.state.checked}
onChange={this.handleChange}
disableElevation
disableRipple
style={{ backgroundColor: "transparent" }}
value="checked"
color="primary"
/>
}
labelPlacement="start"
label={this.state.checked ? "On" : 'Off'}
/>
);
}
}
export default withStyles(styles)(SwitchLabels);
By utilizing the original Button component together with a className, you could have easily included disableRipple to the button as shown below:
<Button disableRipple>
Join our team
<Button
sx={{
color:'#000000',
background:'rgba(0, 0, 0, 0.065)',
width:'84px',
height:'51px',
boxShadow: '0px 0px 4px 0px #00000040',
fontSize:'20px',
'&:hover': {
background:'rgba(0, 0, 0, 0.065)'
},
}}
variant="contained">
Earn +50$
</Button>
Looking for help with this line of code: <iframe src="http://www.google.com" name="google" style="Z-INDEX: 0; MARGIN-TOP: -1px; WIDTH: 100%; HEIGHT: 1070px"> <html> <head></head> <body> < ...
Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...
Can you help me troubleshoot this? I have a .social div, and I want zero padding on the top for the first one, and no bottom border for the second one. I tried creating classes for the first and last scenarios, but it seems like something is off: .socia ...
When setting up routing on the client side, I defined the routes in index.js as follows: ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={App}/> <Route path="/login" component={Login}/> ...
In my application, I am using a Javascript query to fetch the data of the current user. This data is then used to verify the user's access permissions for different pages in my React app with the help of Apollo Client and GraphQL. Unfortunately, ther ...
I have been unable to locate any information in the Material UI documentation that addresses how to trigger a function on scroll using the onScroll event. All of my components follow either a functional and stateless approach or they are container componen ...
I'm currently diving into Material UI while working on a project in React. I find myself a bit perplexed about the most effective approach to styling and customizing components. Here are some options I've come across: A: Utilizing a custom them ...
Here is a Grid component that I am working with: <Grid container height="100vh" direction="column"> <Grid item alignSelf="flex-end"> <Button variant="text">List Your Property</Button> ...
I have been experimenting with the login submit function using cypress. The login form I am testing is created with material-ui and formik. Unfortunately, I am unable to access the 'data-testid' props on Input when running the test. test code ...
I am currently working on my portfolio website using Nextjs and I would like to incorporate gifs into the site. However, I have been struggling to figure out how to do so. Below is the code that I have been working with: https://i.stack.imgur.com/zjoiD.pn ...
I am currently using the MUI v6 DatePicker component (https://mui.com/x/react-date-pickers/date-picker/). However, I have noticed that the weeks in the calendar are starting with Sunday instead of Monday. I am in need of assistance to change this behavior ...
I'm currently working on fetching API data and displaying it in tables, using mock data for now. Successfully implemented actions and reducers. Managed to call the API but encountered an issue with network calls where I see a blocked response content ...
Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...
I am currently utilizing Bootstrap DataTable in conjunction with the Yadcf filter plugin. The filter is functioning correctly for a regular table, however, when I have a fixed column with a Select2 dropdown, it does not render properly. The dropdown is hid ...
In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it. ...
I have successfully configured React and webpack. Below is my webpack.config.js file: const HtmlWebPackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { index: './client/inde ...
Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...
When working with redux/context API, data is typically fetched and stored in the global state once, allowing it to be accessed throughout the app. For example, a USER authentication state may hold details like user ID and token. I am curious to learn abo ...
Currently, I am utilizing the expo-camera library to capture a selfie image. Despite the preview being mirrored, the final saved image reverts to its normal orientation. Is there any way to avoid this behavior so that the image remains mirrored? Alternativ ...
Currently, I am in the process of updating a card record that contains fields such as cardText, source, and ownedBy. The ownedBy field is an array, not editable by the user, but crucial for preserving its value during the Patch operation. To hide the owne ...