We Keep Coding

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

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" />

How can I override Radix UI Tooltip.Root component

I am using the Radix UI tooltip, and I am trying to override the styling of the Tooltip.Root component.
I am able to override the other Tooltip components as seen below, but this doesn't work for Tooltip.Root:
import * as TooltipPrimitive from "#radix-ui/react-tooltip";
const StyledTooltipTrigger = styled(TooltipPrimitive.Trigger, {
display: "flex",
border: "none",
background: "transparent",
padding: 0,
textAlign: "start",
});
In short, I have a div that is inside the Tooltip.Trigger that I need to expand to width: 100%, however, the Tooltip prevents this div from expanding.

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

Putting text on top of image not working?

I am trying to overlay text onto the image and cannot figure out how too. This may be an easy question so if you can go into some detail on how it is done that would be much appreciated.
import React from "react";
import { Typography } from "#material-ui/core";
import topImg from "/Users/rayhewitt/Desktop/react-portfolio/src/imgs/topImg.jpeg";
import useStyles from "./HeadStyles";
const Head = () => {
const classes = useStyles();
return (
<div className={classes.top}>
<img className={classes.image} src={topImg} alt="codingPic" />
<Typography className={classes.intro} align="center">
Hey, im Ray Hewitt a UI/UX frontend developer
</Typography>
</div>
);
};
export default Head;
import { makeStyles } from "#material-ui/core";
export default makeStyles({
top: {
backgroundColor: "rgba(8,89,145,255)",
height: "5000px",
},
image: {
paddingTop: "48px",
width: "100%",
zIndex: "100",
},
intro: {
justifyContent: "center",
position: "absolute",
zIndex: "101",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Quickly looking at your code it seems like you're almost there. I think the only thing missing is a position: relative on your parent container and a position on the text.
.top {
position: relative;
}
.text {
position: absolute;
top: 0; // or left/right/bottom
}
That should do it.
What's important to understand here is that if you position: absolute an element then it will stick to whatever parent throughout the tree is position: relative or it will stick to body if there isn't any. Marking the parent container as position: relative will have the text stick to that parent, then you can control the positioning with top/bottom/left/right.
Side note, I'm not sure it makes sense to use justify-content if the text isn't display: flex.

Place text at the bottom of a div in React

How can I place text at the bottom of a div in plain old React (not React Native)?
In html, you can place text at the bottom of a div by using
vertical-align: text-bottom;
In React Native, it looks like you place text at the bottom of a div by using
textAlignVertical: "bottom",
Is there a simple way to place text at the bottom of a div in plain old React?
The only method I got to work so far is is to use Flexbox.
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Codesandbox
Edit: This is a simplified example. What I really need is a div with items in several different spots, and text on the bottom.
Edit: In both HTML and React, vertical-align: text-bottom; does not move text to the bottom of a div. It only shifts the text down a little bit to the bottom of where the text would normally be. So in both HTML and React, it can be used to shift text down a little for a subscript. But in both HTML and React, it can't be used to shift text way down to the bottom of a div.

You could use margin:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
marginTop: 'auto'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Or align-self:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
alignSelf: 'flex-end'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}

I noticed you mentioned the div has lots of other information in a more complicated example. I would highly recommend trying out css grid if you haven't already. It allows you to structure the items on your screen very easily.
Here's an example using grid to create the 'holy grail layout' which is by no means the best example but it shows how easy it is to structure divs in different areas of the screen.
https://codepen.io/frazermg/pen/bXbXOR?editors=1100
.container {
display: grid;
grid-template-areas: 'header header header header'
'left content content right'
'left content content right'
'footer footer footer footer';
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(30vh, auto);
}
.header {
background-color: blue;
grid-area: header;
}
.left {
background-color: green;
grid-area: left;
}
.content {
background-color: #eee;
grid-area: content;
}
.right {
background-color: pink;
grid-area: right;
}
.footer {
background-color: orange;
grid-area: footer;
}
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
Here is an example of nested grids:
https://codepen.io/frazermg/pen/ZgEwVd
This website is very useful for all things css, especially flexbox and grid.
https://css-tricks.com/snippets/css/complete-guide-grid/
I hope this can help you!

What about simply style any span or component with text inside a div like this:
... style={{position:"absolute",bottom:"0px"}} ...