Estoy recreando este efecto de enfoque animado radial con imagen de máscara: Codepen . Sé que puedo copiar y pegar el CSS en un archivo .css, pero quiero lograr el mismo resultado con un componente con estilo. Para eso, declaré el CSS en mi componente con estilo y lo apliqué. Pero no estoy seguro de por qué no pasa nada en absoluto.
Aplicación.tsx
import React from "react"; import styled from "styled-components"; const Property = styled.div` @property --focal-size { syntax: "<length-percentage>"; initial-value: 100%; inherits: false; } `; const FocusZoom = styled.div` --mouse-x: center; --mouse-y: center; --backdrop-color: hsl(200 50% 0% / 50%); /* can't be opaque */ --backdrop-blur-strength: 10px; position: fixed; touch-action: none; inset: 0; background-color: var(--backdrop-color); backdrop-filter: blur(var(--backdrop-blur-strength)); mask-image: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent var(--focal-size), black 0% ); transition: --focal-size .3s ease; /* debug/grok the gradient mask image here */ /* background-image: radial-gradient( circle, transparent 100px, black 0% ); */ } `; function App(bool: boolean) { const zoom: Element = document.querySelector("focus-zoom"); const toggleSpotlight = (bool) => zoom.style.setProperty("--focal-size", bool ? "15vmax" : "100%"); window.addEventListener("pointermove", (e) => { zoom.style.setProperty("--mouse-x", e.clientX + "px"); zoom.style.setProperty("--mouse-y", e.clientY + "px"); }); window.addEventListener("keydown", (e) => toggleSpotlight(e.altKey)); window.addEventListener("keyup", (e) => toggleSpotlight(e.altKey)); window.addEventListener("touchstart", (e) => toggleSpotlight(true)); window.addEventListener("touchend", (e) => toggleSpotlight(false)); return ( <> <h1> Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect </h1> <FocusZoom></FocusZoom> </> ); } export default App;Echa un vistazo a la solución con componentes con estilo Code sandbox
import React, { useEffect } from "react"; import styled, { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` body { display: flex; align-items: center; justify-content: center; } /* custom properties */ :root { --focal-size: { syntax: "<length-percentage>"; initial-value: 100%; inherits: false; } --mouse-x: center; --mouse-y: center; --backdrop-color: hsl(200 50% 0% / 50%); --backdrop-blur-strength: 10px; } `; const Wrapper = styled.div` height: 400px; width: 400px; background: conic-gradient( from -0.5turn at bottom right, deeppink, cyan, rebeccapurple ); `; const FocusZoom = styled.div` position: fixed; touch-action: none; inset: 0; background-color: var(--backdrop-color); backdrop-filter: blur(var(--backdrop-blur-strength)); mask-image: radial-gradient( circle at var(--mouse-x) var(--mouse-y), transparent var(--focal-size), black 0% ); transition: --focal-size 0.3s ease; `; function App(bool) { useEffect(() => { const zoom = document.getElementById("zoomId"); const toggleSpotlight = (bool) => zoom.style.setProperty("--focal-size", bool ? "15vmax" : "100%"); window.addEventListener("pointermove", (e) => { zoom.style.setProperty("--mouse-x", e.clientX + "px"); zoom.style.setProperty("--mouse-y", e.clientY + "px"); }); window.addEventListener("keydown", (e) => toggleSpotlight(e.altKey)); window.addEventListener("keyup", (e) => toggleSpotlight(e.altKey)); window.addEventListener("touchstart", (e) => toggleSpotlight(true)); window.addEventListener("touchend", (e) => toggleSpotlight(false)); toggleSpotlight(); }, []); return ( <Wrapper> <h1> Press <kbd>Opt/Alt</kbd> or touch for a spotlight effect </h1> <FocusZoom id="zoomId"></FocusZoom> </Wrapper> ); } export default App;Además, asegúrese de tener estilos y componentes globales importados en el archivo de la aplicación.
import Test, { GlobalStyle } from "./test"; export default function App() { return ( <div className="App"> <GlobalStyle /> <Test /> </div> ); }