why inline styling &:hover will not have any effect in react js - javascript

I'm trying to add hover effect to a span element as shown below.
Hover effect doesn't work when added inside
style prop.
But, If it is written in separate css file it will work
I just want to know, Why it is So?
https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<span
style={{
fontSize: "4em",
color: "blue",
"&:hover": {
color: "green"
}
}}
>
Element
</span>
<div></div>
<span className="ele">Element 2</span>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.ele {
font-size: 4em;
color: blue;
}
.ele:hover {
font-size: 6em;
color: green;
}

You need to use JSS Plugin which supports the psudo-selectors inline style, or you should use Material UI, which also support this plugin.

That because we can't specify the inline styles for pseudo elements and pseudo classes. You can use it with the,
Internal - by using a <style> element in the section.
An internal CSS is defined in the section of an HTML page, within a element.example
External - by using a element to link to an external CSS file
To use an external style sheet, add a link to it in the section of each HTML page.example

Related

Div is ignoring whatever styling I put on it

We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn't work.
import React from "react";
import { Link } from "react-router-dom";
const DisplayVideos = ({videos}) => {
return (
<div >
{videos.map((video, index) => {
// get video id
return (
<div style={{'margin-bottom': '80px'}}>
<Link to={`/video/${video.id.videoId}`}>
<div key={index}>
<img src={video.snippet.thumbnails.medium.url} alt="" />
</div>
<div>
<div >{video.snippet.title}</div>
</div>
</Link>
</div>
);
})}
</div>
);
}
export default DisplayVideos;
styles page:
.display-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(29, 50, 67);
}
.display-description{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(0, 0, 0);
}
Link{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS just to show the bounds */
border: 2px solid;
background-color: #eee
}
.text {
width: 20%;
inline-size: 10px;
overflow-wrap: break-word;
}
There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:
.link {
// styles
}
Then do <Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
With react you have to use lowerCamelCase for CSS atributes.
Try marginBottom instead of margin-bottom in your component.
Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements
<div className='class1 class2 etc.'>
Or
<div style={{marginBottom: '80px'}}>

SASS styles injected by innerHTML don't work

I want to inject style to div in component. My issue is it's scss and in application we use scss but style does not want to work. When inject the same style as css one. Everything works fine. The question is how can I force my component to execute style like this? Is it even possible or should I convert scss style to css one?
HTML.TS
<div id="myExampleId">
<div #htmlContainer [innerHtml]="htmlToDisplay | safehtml"></div>
</div>
Style to display in component:
<style>
#myExampleId {
table {
border-collapse: collapse;
width: 100%;
}
th{
background-color:#fe996b;
}
td, th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
body {
background-color: #fe996b;
}
}
</style>
Import the styles not in the template but in the component itself.
Look in Angular docs https://angular.io/guide/component-styles

Is there a way to decorate the text within the Link element of 'react-router-dom'?

I added style properties to to reset the text style between element. 'style={{textDecoration='none'}
function Navigation() {
return (
<div className="nav">
<Link className='nav__btn' style={{ textDecoration: 'none' }} to='/'>Home</Link>
<Link className='nav__btn' style={{ textDecoration: 'none' }} to="/about">About</Link>
</div>);
}
And I wrote the code on the css as follows.
.nav .nav__btn {
text-decoration: none;
background-color: transparent;
color: white;
font-size: 30px;
font-style: italic;
font-weight: bolder;
}
.nav .nav__btn:hover{
transform: scale(1.1);
color: orange;
text-decoration: underline;
transition: transform .35s;
}
The font color changes when the mouse hovers, but 'text-decoration: underline' doesn't work.
I think there's a crash, but I don't know exactly what's wrong.
Is there any way to apply underline?
Inline CSS has higher priority than external CSS
Priority of CSS Values For an HTML Document
You are addind an inline CSS for text-decoration with:
style={{ textDecoration: 'none' }}
And then trying to overwrite it with your external CSS, but without effect because inline CSS has higher priority over external, and since the font color is not having any other CSS is taking the external CSS

use styled-components to share styles between components/elements

I am using styled-components along with Gatsby. I used styled-components to style the Link component provided by Gatsby for my home page.
const HomePageLink = styled(Link)`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`
However I realize that I also need to style a plain html <a /> tag using the exactly same style. I wonder is there a way to make the style component above adapt to <a /> tags without duplicating the code like this
const HomePageAnchorTag = styled.a`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`
Yes, use css API which allows you to construct reusable CSS blocks.
A helper function to generate CSS from a template literal with interpolations.
import styled, { css } from 'styled-components';
const reusableCSS = css`
display: inline-block;
font-size: ${fontSizes.xxlarge};
text-decoration: none;
box-shadow: none;
:link,
:visited {
color: ${colors.slate};
}
:hover,
:active {
color: ${colors.red};
}
`;
const HomePageAnchorTag = styled.a`
${reusableCSS}
`;
const HomePageLink = styled(Link)`
${reusableCSS}
`;
Usually, you will notice a mixins.js file that contains exports of reusable css block, for example:
// mixins.js
const flexCenter = css`...`
export default { flexCenter };
// usage inside styled components.
${mixins.flexCenter}

Change Element's Class Name without affecting CSS values

I have an DOM element and I want to only change the className of the element. I want to remain the css values as it. (For both external css and inline css)
For example, if I have this:
.sample{
display: block
font-size: 10px,
font-color: #fff
}
<div class="sample">...</div>
After doing some JavaScript operation I need to reach this:
.newCss{
display: block
font-size: 10px,
font-color: #fff
}
<div class="newCss">...</div>
Note: There is no strict rule for css, there can be a css selector with 100 values or with only 1 one.
Note2: There is no css selector such as .newCss, I should transform the css properties from .sample, to a new one called .newCss
You can get the computed style for the element prior to making the change:
const style = getComputedStyle(theElement);
and then apply that styling to the element directly:
theElement.style.cssText = style.cssText;
Then removing the class won't change the element's styling, because it's styled inline.
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
const cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
theElement.style.cssText = cssText;
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
.newCss {
background-color: yellow;
}
<div class="sample">this is the div</div>
If the new class has styling associated with it in CSS, that might affect the styling of the element. If you need to prevent that, change the class first, then assign the CSS text:
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
theElement.style.cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
<div class="sample">this is the div</div>
You have to use JavaScript. In order to use JavaScript, you have to assign a ID to the <div> tag. Then manipulate it by JavaScript. Example: document.getElementById("id1").className="sample";
Also make sure that you using semicolon(;) after CSS properties.
function f1()
{
document.getElementById("id1").className="sample";
}
.sample{
display: block;
font-size: 10px;
font-color: #fff;
color: red;
}
.newCss{
display: block;
font-size: 10px;
font-color: #fff;
color: green;
}
<div id='id1' class="newCss"><p>Hello</p></div>
<button onclick="f1()">Click</button>
Well, if you want to change className to a class which is identical, you can simply redefine the class in the style sheet to be equivalent, or you can use inline styles, but the purpose of CSS classes is to keep a unique set of rules, so two identically-ruled CSS classes would defeat the purpose for which they exist, to be unique definitions of CSS rules, so if you want the CSS rules exactly the same, then there wouldn't be a reason to change the className, unless you were referencing it with other JavaScript functions, or if you wanted to add additional styles while keeping the old ones, in such a case:
use classList to dynamically add or remove certain individual classes, while keeping others.

Categories