Develop Reference

Trouble Styling HTML Input in Next.js

I am having trouble styling html form elements in Next.js. I cannot get the CSS to work using a simple class name from the imported CSS stylesheet, but I have had success with inline styling using
style={{
width: "300px",
height: "50px",
paddingLeft: "10px",
paddingTop: "5px",
border: "none",
}}
The problem is, when I select the form it adds an unwanted inner border. I need to add an input:selected {border: "none"} styling. I read this is a limitation with inline styling and I would have to use a CSS-in-JS library. It just so happens Next.js has a built in library that does this. Unfortunately, using the library is not able to override and style my input. I have tested and have had success on other elements with this library, however, the input element is not working. Here is what I have:
<form className="subscribeInput" style={{ paddingBottom: "100px" }}>
<input
style={{}}
type="text"
id="email"
name="email"
placeholder=" Email Address"
/>
<style jsx>{`
subscribeInput input[type="text"] {
width: "300px";
height: "50px";
padding-left: "10px";
padding-top: "5px";
border: "none";
}
`}</style>
<button
style={{
width: "100px",
height: "50px",
borderColor: "white",
paddingLeft: "10px",
paddingTop: "5px",
backgroundColor: "black",
marginLeft: "20px",
color: "white",
}}
type="submit"
>
{" "}
Signup{" "}
</button>
</form>
Whereas I have tried a few variations of the selector:
subscribeInput {}
subscribeInput input {}
input {}
input[type="text"]
Lastly, in case if this is related, my border box on my submit button will not go fully "white" as instructed. Instead it is white on the top and left borders and light gray on the right and bottom borders. I have included a screenshot with the issues presented. It has the added inline styling with the inner border that presents itself after selected as well as the gray border issue.

In your global css you can add the code below to remove borders on input or textarea focus:
textarea:focus, input:focus{
outline: none;
}

You can make it's color transparent by adding focus:ring-transparent to className.

CenterText in doughnut in react

centerText: {
display: true,
text: `${income}`,
fontSize : 10
}
I'm not able to see center text using about code in option of doughnut chart.
Anyone know why?
Thank you in advance

It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.
<div style={{ width: '200px', height: '200px', position: 'relative'}}>
<Doughnut data={data} options={options} width={200} height={200}/>
<div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px', lineHeight: '20px'}}>
<span>Text here</span> //may use text-align here to center text
</div>
</div>

Pseudo element not showing in React on paragraph tag despite using display block

This pseudo element ::after won't show up in my browser at all. I am using React.js and Material UI makeStyles.
This is the code:
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '',
display: 'block',
height: '2px',
width: '2px',
},
},
Note that the code below modalTitle shows up and works, only the pseudo element doesn't go through. Any thoughts?

This is a tricky one. When you use makeStyles, it accepts a styles object (or a function that returns an object). This object has the class names as keys and objects containing attribute-value pairs as values. These values are strings (like "block", "green", or "10px 15px").
The ::before and ::after pseudo-elements in CSS allows us to insert content onto the page. Every pseudo-element must have a CSS content property, without it the default value of content is set to normal/none, and no content is displayed.
The problem with your code is that you add content: '' in your object, but you need to pass an empty string as the CSS value, like this: content: '""'.
Similarly, if you want to insert some text using content you can't simply add the string, you need to use quotes around the text and pass it as a string:
// ❌ this one doesn't work
{
content: 'some text',
}
// ✅ this one does work
{
content: '"some text"',
}
So, you can use the following and it will add the element:
const useStyles = makeStyles({
modalTitle: {
borderBottom: '2px solid red',
display: 'block',
margin: '10px 15px',
padding: '0',
width: '100px',
'&::after': {
background: 'green',
content: '""',
display: 'block',
height: '2px',
width: '2px',
},
},
});

How to use borderRadius and borderLeftColor, borderBottomColor, borderRightColor, borderTopColor in CSS?

I want the circle with 25% coloured border and 75% transparent but got as unexpected 100% circle border with black colour.
I also tried borderRadius for each corner but it's not giving desirable output.
progressLayer: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: '#3498db',
borderRadius: 100,
}
});
circle with 25% colored border and 75% transparent.

To make some borders transparent, this should work:
border-right: 2px solid transparent;
And same for other borders.

A neat trick for using transparent instead of opacity is to use rgba colors, so , it would´t be borderLeftColor: 'transparent' , instead use borderLeftColor: 'rgba(0,0,0,0)'
[the last 0 is the transparency, if you use 0,0,0,1 it will be black and 0,0,0,0.5 gives a nice black overlay].
Another solution
Is just enable borderwidth for an specific direction.
progressLayer: { width: 200, height: 200, borderTopWidth: 20, position: 'absolute', borderTopColor: '#3498db', borderRadius: 100, } });
should work but not tested for a circle

How to Bubble onMouseMove event

I have image, where I want to show div when I starting to hover on it, but when that div is being hovered React going crazy, because after second div appear image stop his onMouseMove event,
State holds variable which will decide if div appear or not. Variable name "zoom"
I want to keep firing onMouseMove event even when second div appear, any ideas how I could get something like this?
<img
onMouseMove={e => {
this.setState({ zoom: 'block' });
}}
onMouseLeave={() => {
this.setState({ zoom: 'none' });
}}
id="productImg"
src={images[this.state.imgActive]}
/>
)}
<div
style={{
display: this.state.zoom,
float: 'right',
overflow: 'hidden',
zIndex: 100,
transform: 'translateZ(0px)',
opacity: '0.4',
zoom: 1,
width: 285,
height: 285,
backgroundColor: 'white',
border: '1px solrgb(0, 0, 0)',
backgroundRepeat: 'no-repeat',
position: 'absolute',
left: 0,
top: 0
}}
>

It seem like you have a div on top of the img.
When it appears your mouse is on top of the div and no more on top of the img consequently canceling the event.
I would suggest to add the CSS attribute pointerEvents: 'none' to the div in order to ignore the mouse events and let them be handled by the element below.
Hope it helps.