Styled components not applying styles

Nika Roffy

I have this 2 styled components

  export const Icon = styled.svg`
  width: 8px;
  height: 8px;
  background: black;
`

export const Dots = styled.div`
  border: 2px solid green !imporant;
  height: 30px;
  background: white;
  width: 16px;
  height: 16px;
  border: solid 1px #d2d2d2;
  border-radius: 20px;
  top: 25px;
  position: relative;



  ${Icon}: hover {
    background:black;
  }
  
  }

`

I want to display Icon on the hover of this div but i dont understand why it is not working, Any suggestions please?

Dennis Vash

There is no problem with your code except on hover you don't change the color from its default value black

const Icon = styled.div`
  width: 100px;
  height: 100px;
  background: black;
`;

export const Dots = styled.div`
  ${Icon}:hover {
    background: red;
  }
`;

export default function App() {
  return (
    <Dots>
      <Icon />
    </Dots>
  );
}

https://codesandbox.io/s/styled-react-template-forked-nzwm8

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React styled-components not applying styles to components

Where to put styled components styles

How to do overlapping styles with Styled Components React?

Change inline styles to styled-components

Overriding react components styles with styled component

idiomatic way to share styles in styled-components?

How to create shared styles using styled components?

Extending styles with styled-components not working

use styled-components to share styles between components/elements

How to apply styles to multiple components using styled components

styled-components not applying style to custom functional react component

Styled Components - Inline styling overlaps the media query styles

React app with styled components and twin.macro set global styles

How to import Ant Design css styles in GlobalStyles of styled-components.?

Can I set styles to document body from styled-components?

styled-components: extend styles and change element type

Share the same styles between two types of component with React Styled Components

How to add multiple styles based on property with styled-components?

styled-components - how to set styles on html or body tag?

Overwriting nested styles in React Bootstrap using Styled-Components

How to override third party default styles using Styled Components

React: Why not just use styles object instead of styled-components?

How to extend Link and NavLink with same styles using Styled Components

Styled-Components: specify styles of children on parents hover

Best way to override child styles in styled-components

React-Router not correctly rendering Styled-Components Styles

For styled components, how can I make all component styles cascade to .hover component styles?

How to merge two styled-components which are in different base components but have similar styles?

Can not apply styles to custom components in React Native using styled-components?