How do you use Pseudo-classes in React using css modules?

Question

The example I worked on is the following:

I have a button component that receives the background color as props. The received color will be the background that the button must have when hovering.

Second question: The only way to use props in css, using css modules, is to apply the inline style in the js file where you declare the component?

Below I insert a code base (in the example the background color is applied by default):

import Button from "./Button";

export default function App() {
  return <Button hoverColor={"red"} />;
}

...

export default function Button({ hoverColor }) {
  const buttonStyle = {
    backgroundColor: hoverColor
  };
  return <button style={buttonStyle}>click me!</button>;
}

Thanks

Does this answer your question? React pseudo selector inline styling — Punit Makwana
– Punit Makwana, Commented Nov 1, 2020 at 15:12
@PunitMakwana Hi, I have already read this topic, I would like to manage the css with css modules, without the support of other libraries, I would like to understand if it is possible to use the pseudo classes only with css modules and inline. — Alessandro D'Aniello
– Alessandro D'Aniello, Commented Nov 1, 2020 at 15:21
you need some third party css in js library to do this. I would recommend emotionjs — Punit Makwana
– Punit Makwana, Commented Nov 1, 2020 at 15:24
in your experience do you think it is the only way to solve this problem? — Alessandro D'Aniello
– Alessandro D'Aniello, Commented Nov 1, 2020 at 15:58

Tooba Ali · Accepted Answer · 2020-11-01 16:03:35Z

0

You may use React useState Hook to achieve the desired functionality: (Your Button component should look like this)

import React, { useState } from "react";

export default function Button({ hoverColor }) {
  const [color, setColor] = useState("");

  const buttonStyle = {
    backgroundColor: color
  };
  return (
    <button
      style={buttonStyle}
      onMouseOver={() => setColor(hoverColor)} //set the color when user hovers over the button
      onMouseOut={() => setColor("")} //set color to an empty string otherwise
    >
      click me!
    </button>
  );
}

answered Nov 1, 2020 at 16:03

Tooba Ali

3743 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alessandro D'Aniello Over a year ago

Thanks, it's verbose as a solution, but it works. I thought there was a syntax to use pseudo classes in inline css.

Mustkeem K Over a year ago

do we have another solution

Collectives™ on Stack Overflow

How do you use Pseudo-classes in React using css modules?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related