CODEWITHSUNDEEP
htmlcssfrontend
Olympian Collections
Olympian Collections

Reputation: 143

How to custom style a button from a library?

I'm using a button from a library (https://www.npmjs.com/package/@react-oauth/google I understand this library has a custom button option but this option results in a different response).

I basically like to change the max-width and width to another value (image attached below). May I know is there a way for me to edit these style from CSS?

Thank you! Appreciate any help.

enter image description here

Upvotes: 0

Views: 265

Answers (2)

LeeOtts
LeeOtts

Reputation: 1

So still new myself currently in a full stack boot camp in the react section. It should be possible.

Are you using a external stylesheet or trying to do it using inline?

I was taught to use a external stylesheet From what I am seeing try changing class name to button.

class='button'

Then in your external stylesheet add

.button {
max-width: 400px;
}

Edit. I see you are using react... So it could be className='button'

Edit:

Hello, thanks for your reply! Hmm... in this case I am not able to assign a className to div myself as the div is from the library. The weird class you see above "nsm7Bb..." is not by me. Hence, I was wondering if there's a way to forcefully override library class style. – Olympian Collections

Gotcha.

Have you tried !important?

Is that your inline CSS?

Upvotes: 0

Mo'men Sherif
Mo'men Sherif

Reputation: 335

Google adds this button to the dom inside iframe, there are certain props you can style the button

to add with, check prop width on it's mentioned on @react-oauth/google github README https://developers.google.com/identity/gsi/web/reference/js-reference#width

Upvotes: 1

Related Questions