Style Hover in React

Wir werden mehrere Möglichkeiten vorstellen, Hover-Effekte in React zu stylen.

Hover-Effekte verwenden und Stile für Hover-Effekte in React festlegen

Hover-Effekte sind eine großartige Möglichkeit, unsere Webanwendungen zu verbessern und benutzerfreundlicher zu gestalten. Diese visuellen Effekte sind großartig und tragen dazu bei, die Benutzer bei Laune zu halten.

Wir können Hover-Effekte auch in unseren React-Anwendungen verwenden, um sie mit einfachen Schritten benutzerfreundlich und interessant zu gestalten. Beginnen wir mit einem Beispiel, um zu verstehen, wie wir Hover-Effekte verwenden und Stile für unsere Hover-Effekte festlegen können.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# react
npx create-react-app my-app

Nachdem wir unsere neue Anwendung in React erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# react
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# react
npm start

Wir müssen einige Bibliotheken installieren, die uns helfen, Hover-Effekte in unserer Anwendung zu implementieren.

Wir führen den folgenden Befehl aus, um react-hook für Hover zu installieren.

# react
npm i @react-hook/hover

Wir führen den folgenden Befehl aus, um dash-ui/styles zu installieren.

# react
npm i @dash-ui/styles

Nachdem wir unsere Bibliotheken installiert haben, müssen wir useHover und styles in die Datei App.js importieren.

# react
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

Jetzt definieren wir unsere Elemente Hovertarget und Hovered in export default function App(). Und wir werden ein div zurückgeben, das seinen Klassennamen ändert, sobald es bewegt wird, und ein ref von Hovertarget hat, und es wird einen schwebenden Stil ausgeben, wenn jemand darauf schwebt, oder einen Standardstil, wenn niemand darüber schwebt.

# react
export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

Jetzt werden wir unsere CSS-Stile für die Klassen Hovered und default definieren. Unser Code in App.js sieht also wie folgt aus.

# react
import React from "react";
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

const hoverStyle = styles({
  default: `
    background-color: lightblue;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  `,
  Hovered: `
    background-color: lightgreen;
    color: white;
  `
});

Ausgabe:

Versuchen Sie nun, unsere Hover-Effekte mit style.css anstelle von Instyle-Elementen zu gestalten. Zuerst erstellen wir eine neue Datei als New.js und geben darin ein div mit einer Klasse New zurück. Wir werden auch style.css in diese neue Datei importieren. Unser Code sieht also wie folgt aus.

# react
import "./styles.css"

export default function New() {
  return <div className="New">CSS Style</div>;
}

Jetzt importieren wir diese neue Datei in index.js, um sie auf der Hauptseite in React anzuzeigen, und zeigen die Komponente New nach der Komponente App an. Unser Code sieht wie folgt aus.

# react
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import New from "./New.js";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
    <New />
  </StrictMode>,
  rootElement
);

Lassen Sie uns nun unsere neuen Div- und Hover-Effekte mit CSS gestalten.

# react
.New{
  background-color: lightgreen;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.New:hover{
  background-color: lightblue;
    color: white;
}

Ausgabe:

Hover-Ausgabe: