0

I am using tachyons and I am not able to override default css using tachyons. I am avoiding custom css I am pasting developer tools pic, which would have code too

developer-tools pic

Sahil Kkr
  • 195
  • 4
  • 24
  • Which class do you want to override ? – Cuong Hoang Jan 07 '19 at 19:51
  • @CuongHoang I am giving styling for margin-left and margin-right, but its not applicable – Sahil Kkr Jan 07 '19 at 19:54
  • I'm not sure I'm following the question. Have you specified `ml3` and `mr3` classes in the HTML? Are those the classes you wish to override? If so, and you don't wish to use custom classes and just use tachyons' library, they provide a lot of spacing modifier classes: http://tachyons.io/docs/layout/spacing/ – Griffin Jan 07 '19 at 19:56
  • I am sorry, I applied ml3, mr3, but its not getting any margin – Sahil Kkr Jan 07 '19 at 19:59
  • 1
    This means that another style, likely from another library you have imported, is overriding the margin of the button. Look for the margin properties in your computed styles in the dev tools and see where it's being applied from. You have a number of styles attached to this button, I'm sure it's overriding the tachyon style somewhere. – Griffin Jan 07 '19 at 20:19
  • @GriffinW. yes it is, I am using tachyons with angular-material buttons, which have margin:0px, how can I ignore that? – Sahil Kkr Jan 07 '19 at 20:53
  • This means your angular-materials styles are likely being applied after the tachyons library styles are applied. The easy solution to this is swapping the `link` tags in your HTML so that tachyon CSS file is placed below the angular-material file. – Griffin Jan 07 '19 at 21:05

1 Answers1

0

Use !important

.ml3 {
  margin-left: 1rem !important;
}

.mr3 {
  margin-right: 1rem !important;
}
Cuong Hoang
  • 558
  • 1
  • 3
  • 14
  • Its like customization then, like normal css, I can give any class and use important with any property – Sahil Kkr Jan 07 '19 at 20:04
  • Then check the order of ml3 and mr3 on your css file. Or check agian the order of import css file on your html. make sure the custom css file must be at the end, always beneath all other css files. U understand what i mean ? @SahilKkr – Cuong Hoang Jan 07 '19 at 20:06