Die CSS -Skala wird in React.js (Next.js) nicht angewendet ⇐ HTML

[Guest]

Entwicklungsumgebung

・ Next.js

・ Reacｔ

・ TypeScript < /p>
https: //www.youtube.com/watch?v=ujlpZtyjp-m

Ich habe einen Toolchip mit dem obigen Video als Assiferation erstellt. nicht angewendet. < /p>

Code: Select all

import React, { FunctionComponent } from 'react';

const Index: FunctionComponent = () => {
return (



);
};

export default Index;
< /code>

style.scss
< /blockquote>
div {
&.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-size: cover;
background-color: blue;
background-position: center;
position: relative;
}
&.avatar::before,
&.avatar::after {
position: absolute;
content: '';
top: -0.25rem;
left: 50%;
height: 25px;
width: 25px;
background: black;
transform: translateX(-50%) translateY(-100%) scale(var(--scale));
}
&.avatar::before {
content: attr(data-tooltip);
color: white;
text-align: center;
width: max-content;
max-width: 100%;
background: #333;
}
&.avatar:hover {
scale: 1;
}
}