use of :hover as a simplepseudos in csstype for typescript/react

Question

I am using csstype in a react component library. I want to add a hover effect, which is supported through simple pseudos. Unfortunately I cannot find any example of this being used and I can't get it to work.

I have included some code below that expressed the idea of what I want to do, but I have no idea really

import CSS from "csstype";

export const DropdownContainer: CSS.Properties = {
  display: "grid",
  gridTemplateColumns: "3fr 15fr 30fr",
};

export const DropdownText: CSS.Properties = {
  placeSelf: 'start',
}

export const DropdownTextHov: { [P in CSS.SimplePseudos]?: CSS.Properties }  = {
  ':hover': {
    color: 'blue',
  },
}

<snipped code>

    return (
      <div style={DropdownContainer}>
        <p style={DropdownText}></p>
        <p style={{DropdownText} + {DropdownTextHov}}>this is text</p>
      </div>
    );

I have tried a number of alternatives. I have added the hover to DropdownText, but that doesn't work.

Alternatively, you can use a CSS module in your project and improve your CSS to SCSS. For example; import styles from './styles.css' and usage; <div className={styles.example}></div> — Mahir Altınkaya
– Mahir Altınkaya, Commented Jan 23, 2023 at 20:00
I tried styled-components, but there is a bug in the way it works with rollup which breaks the component when it is imported into an application. I can take a look at SCSS if I can't work out how to use basic css-in-js — Richard George
– Richard George, Commented Jan 24, 2023 at 14:07

farley13 · Accepted Answer · 2025-03-25 01:43:21Z

0

I think the answer is probably here: How can I write 'a:hover' in inline CSS? -

Explanation: The React style parameter sets the inline style for the element. It doesn't behave the same as a css style sheet.

In this case, you are trying to add inline styling for :hover which isn't supported using inline css. To set :hover you will either need a separate css sheet or add a <style></style> block either in your component or elsewhere in the html document.

edited Mar 25 at 1:43

answered Dec 31, 2024 at 20:29

farley13

435 bronze badges

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

2 Comments

Ram Chander Jan 1 at 5:01

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

President Jam Jan 2 at 16:31

Please write answer, then in addition you can add the url/references

Collectives™ on Stack Overflow

use of :hover as a simplepseudos in csstype for typescript/react

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