Button hover styles

[Byloor]

Is there a method to change 'accept' button hover styles?

[Mastermindzh]

This is something to be done with css.

Steps:

1. add buttonClasses to CookieConsent

   <CookieConsent
   buttonClasses="myHoveringButton"
   >
   </CookieConsent>

2. add css:

myHoveringButton {
    background: yellow;
}

,myHoveringButton:hover {
    background: red;
}

If you want the logic to be in react you'd need to somehow pass classNames or style using onMouseEnter and onMouseLeave though that would be discouraged. (look at the mess that creates according to the resources below)

• https://stackoverflow.com/questions/44688144/how-to-do-css-hover-function-in-jsx
• https://stackoverflow.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover

[Mastermindzh]

I am closing it because I haven't heard back from you. Feel free to re-open/comment if you need further assistance.

[Byloor]

@Mastermindzh yes, but for some strange reason, the above answer is not working

1. my Html

   
   <CookieConsent location='bottom' buttonText="accept" cookieName="cookieBanner" style={{ background: '#666970' }} buttonClasses="cookieButton"  expires={150}>
        Cookie text here
   </CookieConsent>

2. css

.cookieButton { background: green; color: #fff; }

.cookieButton:hover { background: #fff; color: green; cursor:pointer; }

I could make styling for button tag, but i will have to do !important for every style, which I do not prefer

[Mastermindzh]

The reason you'd have to use !important to change the background color is because the styles are being inlined. If the only thing you want to change is the background color you should consider using !important; (keep reading for an alternative solution)

Inlined styles always take presedence over css classes unless !important; is supplied, that's just how css works. (external loads first -> internal (in html file) overwrites external stuff -> on element is applied last and thus overrides both)

For advanced styling cases you have the option to disable the builtin styling using disableStyles={true}, the example below will have a green bar and a yellow button which will be red on hover:

Example:

<CookieConsent
    buttonClasses="myHoveringButton"
    disableStyles={true}
>
    test
</CookieConsent>

.cookieConsent {
  align-items: baseline;
  background: green;
  color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 999;
}

.cookieConsent div{
  flex: 1 0 300px;
  margin: 15px;
  text-align: left;
}

.cookieConsent button {
  background: #ffd42d;
  border: 0;
  border-radius: 0px;
  box-shadow: none;
  color: black;
  flex: 0 0 auto;
  padding: 5px 10px;
  margin: 15px;
}

.cookieConsent button:hover {
    background: red;
}

I hope this answer helps you out 😄. If it doesn't please supply more info about the way you want your bar to look and I'll have a look at what I can do.

[Byloor]

Nope, it does not work. its very strange. disabling styles works. Though class name is cookieConsent for the outermost div ,but any styling using .cookieConsent is not applied. Its the same with buttonClasses, classnames are applied, styling is not.

Update: buttonClasses={ style.myHoveringButton}. I had to do this ,above css works now. Thank you

[Mastermindzh]

You must've missed something, the code works. (Zip file: https://ufile.io/zupqv)

No hover:

Hover:

[doublejosh]

It would be great if this worked...

buttonStyle={{
  background: "red",
  color: "white",
  ":hover": {
    background: "blue",
  },
}}

[Mastermindzh]

@doublejosh ,

Best to use a className and style it separately of use one of the many css-in-js libraries to achieve your goal :)

For example styled components

Not tested but should be close...

const CustomCookieConsent = styled(CookieConsent)`     
  background: red;
  color: white,

  &:hover {
    background: blue;
  }
`

<CustomCookieConsent> stuff here </CustomCookieConsent>

[doublejosh]

The official API to style this is the props, and pseudo-classes are broken. That's worth at least a readme note.

That snippet wouldn't style the button, but rather the container... but I'm sure I could nest the button and get it done.

Yes, styled components are great... but not every system uses them, or should if another paradigm is working well. It's not a requirement of this very-specific module.

[Mastermindzh]

That's worth at least a readme note

Styling itself isn't really a feature we're simply passing down whatever you provide to buttonStyles down to the official React Style prop :) It doesn't support pseudo-element, so this library doesn't either, sorry 😄.

I, personally, dislike managing style within a component anyway, that's why I suggested plain old css first ;)

You can easily target the class of the button(s) and restyle it as you wish, there is more than 1 "official" API.

PS: If you wish to discuss further best to open a new issue. Kinda hijacking this one.

[isuyashpatel]

I was using next and I was having no idea to resolve to add hovering effect on it and I'm writing this because next time I do not waste time on it.

step 1 : check the props that has been passed in this npm package if the path change then understand the path and find it

url path for props that can be passed inside to it : https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/CookieConsent.props.tsx

step 2 :

import styles from '../styles/cookie.module.css';

step 3: <CookieConsent enableDeclineButton disableStyles={true} debug={true} containerClasses={styles.boxContainer3} buttonClasses={styles.myHoveringButton2} declineButtonClasses={styles.myHoveringButton4} contentClasses={styles.txt} flipButtons location='bottom' buttonText='I understand' cookieName='SocialWizz' expires={450}> Choose Me </CookieConsent>

step 4: `.boxContainer3{ background: blue; padding: 10px; box-sizing: border-box; word-wrap: break-word; align-items: baseline; display: flex; flex-wrap: wrap; justify-content: space-between; position: fixed; width: 100%; z-index: 999; bottom: 0px;
} .txt{ color:white } .boxContainer3:hover{ background: #1E2F97; }

.myHoveringButton2{ background:#ffd42d; padding: 5px; color: #000017; } .myHoveringButton4{ margin-left: 5px; background: #c12a2a; padding: 5px; color: #e5e5e5; }

.myHoveringButton2:hover { background:black; }.myHoveringButton4:hover { background:blue; }

`