atomize icon indicating copy to clipboard operation
atomize copied to clipboard

is there a way to add custom classes to elements?

Open MD-AZMAL opened this issue 4 years ago • 3 comments

For example if i want to add 'mycustomclass' to a Div

something like this is not possible <Div className='mycustomclass' />

MD-AZMAL avatar Feb 21 '21 09:02 MD-AZMAL

Acqually I use className and it works!

<Div d="flex" justify="center" className="Acquista">

This code becomes: image

LucaMoro96 avatar Feb 21 '21 20:02 LucaMoro96

Acqually I use className and it works!

<Div d="flex" justify="center" className="Acquista">

This code becomes: image

Doing so worked for me but a lot of styles are overwritten by style reset, and a lot of properties don't work as expected.

For example, style

.test {
    background-color: #0ff;
    font-size: 200px;
}

Component

  <Div  className="test">
            Hello
   </Div>

The output is as follows: dsfsd

But it is supposed to be something like this, i had to remove <StyleReset /> to get the this but doing so also removes the atomize styles: asdasd

I'm not sure how to fix this, also if I keep a

tag inside <Div> after giving custom class, the styles of

overwrites my custom class.

MD-AZMAL avatar Feb 22 '21 07:02 MD-AZMAL

I've never tried external CSS because I used to change styles inside Atomize tags like I post in my last comment.

But if you don't want to change the styles within the component, you can try adding !important to your custom CSS like this: .class { color: red !important; }

LucaMoro96 avatar Feb 22 '21 07:02 LucaMoro96