# CSS Selectors and React

Believe it or not CSS selectors are a not-to-go for styling in React. I usually prefers TailwindCSS or styled-components for most of my projects, but sometimes you don't need extra package in your project.

## The Issue with inline styles

There's no way you can use inline styles in React as you use them traditionaly. You have to use a CSS class. I found a article by [FreeCodeCamp](https://www.freecodecamp.org/news/react-styled-components-inline-styles-3-other-css-styling-approaches-with-examples/) about styles in react.

Well it gathered my attention about using CSS selectors with inline css. So I decided to write a small article about it. I hope you will find it useful.

## Are there advantages?

* No need for extra package.
    
* And they are quick.
    
* No need to use class.
    

Today I'm going to show you how to mutate css selectors with useState and pointer events.:

```plaintext
function Text() {
return (
  <div
    style={{
      color: 'red,
    }}>
    Click Me
  </div>
  )
}
```

Let's move the styles to another object.

```plaintext
const TextStyle = {
  color: 'red,
};

export function Text() {
 return (
  <div
    style={TextStyle}>
    Sample Text
  </div>
  )
}
```

Now we are going to use useState hook to change the color of the Text on hover.

```plaintext
import { useState } from 'react'

const TextStyle = ({ hover }) => ({
  color: hover ? 'yellow' : 'red',
})

export default function Text() {
  const [hover, setHover] = useState(false)
  return (
    <div
      style={TextStyle({ hover })}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      Click Me
    </div>
  )
}
```

The useState and pointer events helped us to transform the color of Text. I rarely used inline styles in React before, but I think it's a good example.

Also this is my first post. I hope you will like it. Let me know! I'm always open to [feedback](https://twitter.com/yo9e5h).