proksh / atomize

Design System for developers build on styled-components & React JS.
https://atomizecode.com/
Other
1.75k stars 343 forks source link

is there a way to add custom classes to elements? #48

Open MD-AZMAL opened 3 years ago

MD-AZMAL commented 3 years ago

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

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

LucaMoro96 commented 3 years ago

Acqually I use className and it works!

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

This code becomes: image

MD-AZMAL commented 3 years ago

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

after giving custom class, the styles of

overwrites my custom class.

LucaMoro96 commented 3 years ago

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; }