Valchan

"What we know is a drop.. What we don't know is an ocean." - Isaac Newton

18 de novembro de 2021 • 1 min de leitura

Imagem de Background utilizando var inline

Como alterar uma imagem de background no component com uma var inline?

// App.js
import "./styles.css"

export default function App() {
  const imageUrl =
    "https://images.unsplash.com/photo-1637247474589-e948ee383422"
  const bgImage = { "--bg-image": `url(${imageUrl})` }

  return (
    <div className="App" style={bgImage}>
      <h1>Hello ReactJS</h1>
    </div>
  )
}
/* styles.css */
.App {
  background-image: var(--bg-image);
  background-size: cover;
}

Caso você esteja utilizando typescript, você pode utilizar o código abaixo:

// App.ts
import { CSSProperties } from 'react';
import "./styles.css";

export default function App() {
  const imageUrl = "https://images.unsplash.com/photo-1637247474589-e948ee383422";
  const bgImage = { "--bg-image": `url(${imageUrl})` } as CSSProperties;

  return (
    <div className="App" style={bgImage}>
      <h1>Hello ReactJS</h1>
    </div>
  );
}

Magic

Comentários