How to remove border-bottom from TextField when hover/mouseOver? - javascript

I'm beginner in ReactJS and I'm using materia-ui to create a page.
I need to do a custom on a TextField. When I hover over the Input field I don't want the border-bottom to change. However, by a default material-ui setting, when I hover over the element, the border-bottom is changed. It's easier to explain with this image below. I don't want the border to get thicker when I hover. Could you tell me how can I remove this?
Here's my code I put into codesandbox
import React from "react";
import * as S from "./styles";
export default function App() {
return (
<div className="App">
<S.Input label="Name" variant="standard" />
</div>
);
}
import styled from "styled-components";
import { TextField } from "#mui/material";
export const Input = styled(TextField)`
&& {
:hover {
border-bottom: none;
}
}
`;
Thanks a lot for any help.

You can override the default css like this (Here is sandbox):
.MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {
border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;
}
Ideally, you should create a custom class for this style and apply it where necessary, otherwise these changes will be global. e.g:
.[your-custom-class-name].MuiTextField-root .MuiInputBase-root:hover:not(.Mui-disabled):before {
border-bottom: 1px solid rgba(0, 0, 0, 0.42) !important;
}

If you want to use styled-components you can do it like the code below.
import styled from "styled-components";
import { TextField } from "#mui/material";
export const InputStyled = styled(TextField)`
& .MuiInputBase-root {
:hover {
:before {
border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}
}
}
`;
<InputStyled label="Name" variant="standard" />

Related

Hide slider thumb in material-ui library

I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.
Here is my code:
import * as React from "react";
import Slider from "#mui/material/Slider";
import "./style.css";
export default function ContinuousSlider() {
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Slider
aria-label="Volume"
value={value}
onChange={handleChange}
focusVisible={false}
/>
);
}
style:
.MuiSlider-thumb {
background-color: orange;
box-shadow: none;
width: 0px;
height: 0px;
}
.MuiSlider-rail {
background-color: orange;
border: none;
}
.MuiSlider-track {
background-color: red;
border: none;
}
.MuiSlider-rail {
background-color: green;
}
working code here
result:
on focus
I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb.
How can I remove it?
I want the following style always, even when user drag the thumb:
You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)
.MuiSlider-thumb:is(:hover, .Mui-active) {
display: none;
}
Demo

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.

Using router link on a div in react

Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}

Prevent Navlink from highlighting on hover

I am trying to have a whole section of a page act as a link to another page, but I don't want the section to be highlighted in blue when the user hovers over it. No matter what I do it highlights on hover.
JS
import { NavLink } from "react-router-dom";
<NavLink to="/application" className="nohighlight">
<h1 className="puppytitle">
Get your own puppy
</h1>
</NavLink>
CSS
I thought using !important was like the nuclear option for css, but even that is not working.
.nohighlight {
text-emphasis: none;
text-decoration: none;
}
.nohightlight:hover {
text-decoration: none !important;
}
Thank you in advance.
Looks like all you needed to do was define the color of the text. Here's an example:
import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import styled from 'styled-components';
export default function App() {
return (
<div>
<h1>Hello CodeSandbox</h1>
<Router>
<StyledNavLink to='www.google.ca'>testing</StyledNavLink>
</Router>
</div>
);
}
const StyledNavLink = styled(NavLink)`
text-emphasis: none;
text-decoration: none;
color: black;
&:hover {
text-emphasis: none;
text-decoration: none;
color: black;
}
`;
CodeSandbox: https://codesandbox.io/s/stack-63925598-navlink-color-gqop8

Clickable div acting as a button function react js

I have a button function inside the component 'CZButton', the button is used in "personlist" for a pop up, I am trying to make the div card inside of either 'personlist' or 'person' clickable so that instead of clicking the button, the div would be clicked and shows the drawer pop up.
I tried adding onclick inside divs and but it did not seem to reach the drawer function. here is a sandbox snippet, would appreciate the help.
https://codesandbox.io/s/l9mrzz8nvz?fontsize=14&moduleview=1
You can add an onClick listener in React just by writing something like:
// omitting the rest of the render function for brevity
return (
<div className="row" onClick={e => console.log("Clicked")}></div>
);
Just be careful with the HTML semantics. Although it is possible, I wouldn't really recommend adding onClick events to a div. There are good resources online about HTML5 standards and what you should adhere too.
Live Demo: https://n329k226om.codesandbox.io/
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.test = this.test.bind(this);
}
test() {
alert("function executed on clicking div");
}
render() {
return (
<div>
<div
onClick={() => this.test()}
className="interactivediv fa fa-window-close"
>
div
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.interactivediv {
height: 150px;
width: 150px;
background: rgb(68, 196, 196);
cursor: pointer;
border: 1px solid grey;
}
.interactivediv:active {
border: 2px solid black;
}

Categories