We Keep Coding

Disable Ripple effect on MUI Button and add custom

I wanted to remove the ripple effect on the button and implement my custom effect in MUI Button. I have removed ripple using disableRipple. I have tried to apply shadow when the user clicks on an element, but somehow it's not working.
import * as React from "react";
import Button from "#mui/material/Button";
import { alpha } from "#mui/material/styles";
export default function DefaultProps() {
return (
<Button
variant="outlined"
// className='Mui-focusVisible'
disableRipple
sx={{
"&:hover": {
boxShadow: `0px 0px 0px 0px ${alpha("#000", 0.16)}`
},
"&.Mui-focusVisible": {
boxShadow: `0px 0px 0px 50px ${alpha("#000", 0.16)}`
},
"&.Mui-active": {
boxShadow: `0px 0px 0px 8px ${alpha("#000", 0.16)}`
}
}}
>
Change default props
</Button>
);
}
I have used Mui-focusVisible to apply shadow on click as mentioned here is doc
disableRipple bool false
If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.
My main intention is to achieve a click effect same as Ant Design. Check the button here: https://ant.design/components/button/
Sandbox: https://codesandbox.io/s/defaultprops-material-demo-forked-rhggn?file=/demo.js
Can anyone help me out?

STEP 1: Disable default ripple effect
Disable ripple effect by adding disableRipple like this:
<Button disableRipple>Text</Button>
STEP 2: Add custom pulse effect
The magic happens inside the style.css file. See the forked CodeSandbox snippet.
EDIT
Since you wanted the code to be inside sx I moved the code from the style.css file to the App.js file and placed it inside sx. See the StackBlitz snippet.
App.js
import React from 'react';
import Button from '#mui/material/Button';
import './style.css';
export default function App() {
return (
<Button
variant="outlined"
disableRipple
sx={{
borderRadius: '5px',
'&::after': {
content: '""',
display: 'block',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
opacity: 0,
transition: 'all 0.5s',
boxShadow: '0 0 10px 10px rgba(0, 123, 255, 0.5)',
},
'&:active::after': {
boxShadow: '0 0 0 0 rgba(0, 123, 255, 0.5)',
position: 'absolute',
borderRadius: '5px',
left: 0,
top: 0,
opacity: 1,
transition: '0s',
},
}}
>
Change default props
</Button>
);
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
index.html
<div id="root"></div>
style.css
// Empty

It's much simpler than that...
Just call disableRipple={true} and you're good to go.

::before pseudo element not working in makeStyles

I am using makeStyles in react and I cannot figure out why the ::before content won't show. It will work if I make the content a picture but it doesn't show with text.
To clarify further the ::before element is not being rendered at all.
cardPoint: {
alignSelf: 'center',
justifySelf: 'start',
maxWidth: '250px',
position: 'relative',
"&::before": {
content: 'Look at me',
display: 'inline-block',
color: '#000',
},
}

I think you have to pass 'Look at me' as '"Look at me"':

flex with textinput not working in my react native app

I want to extend the TextInput to the entire screen and not set a definite width.
To do that I know we have to set "flex:1"
But it doesn't seem to work at all.
What is wrong here?? I want the TextInput to be stretched with the Button next to it.
<View style={{flex: 1, alignItems: 'stretch' , flexDirection: 'row'}}>
<TextInput value="nil" style={{ backgroundColor:"grey", height: 40}} textAlign='center'/>
<Button title="V" onPress={()=>{this.dropList()}} />
</View>
I want something like this. How do I get this???

You can use CSS Grid in your View, adding grid-template-columns for the columns width, like:
display: grid;
grid-template-columns: 1fr 3rem;
width: 100%;
With inline styles (not recommended at all):
{{ display: 'grid'; gridTemplateColumns: '1fr 3rem'; width: '100%' }}

You are putting the flex property on the parent whereas it needs to be applied on the TextInput itself.
Bonus: You don't need to set flexDirection to row because that's the default.
Here's a pure HTML, CSS example to show what I mean.
.view {
display: flex;
}
.view input {
flex: 1;
}
<div class='view'>
<input/>
<button>Click Me</button>
</div>

How to display modal without backdrop effect with react-modal?

I am using react-modal for both modals and notifications.
I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.
Here is a basic modal I set up.
https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js
Any suggestions on how only display the modal without the backdrop? Note that I want to be able to close the modal if click outside of it.

You need to add overlay option to customStyles with alpha has 0.
Something like this
const customStyles = {
overlay: {
backgroundColor: "rgba(0, 0, 0, 0)"
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)"
}
};

As you can see from the image, i've removed background color property to remove overlay
styles.css
.ReactModalPortal .ReactModal__Overlay.ReactModal__Overlay--after-open {
background-color: unset !important;
}

I am hoping you can prevent this by adding some css
.modal-backdrop.show {
opacity: 0 !important;
}

How to vertically and horizontally center a component in react?

How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}

Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>

Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.

Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).

This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}

If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>

If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>