1

I started my visual design for a project in a simple HTML application, using plain CSS. I decided I wanted to move all my CSS code over to a brand new React app I just created but I'm running into troubles getting some styles to work now that it is in my React app

I'm using an adaptation of this: https://codepen.io/creotip/full/cfuAi

It worked fine when I was testing it out in my HTML application.The only thing that doesn't display at all is the shadow on the bottom of the "buttons" and the border radius on the bottom two corners. I have the styles attached that are giving me problems. All the other styles are fine except for the shadows

sample div from my app.js

<div>
  <a href="#" className="btn left">
    <span className="left icon fa fa-recycle"></span>
    <span className="right title"><span className="arrow-right"> 
    </span>Test link</span>
  </a>
</div>

my css

span.left{
 float:left;        
 border-radius:6px 0 0 6px;
 -moz-border-radius:6px 0 0 6px;
 -webkit-border-radius:6px 0 0 6px;
}

span.icon{
 font-size:23px;
 background-color:#392315;
 -webkit-box-shadow:0 3px 0 0 #25170e; 
 box-shadow:0 3px 0 0 #25170e;
 text-shadow:0px 1px 1px #888;
}

span.title{
 -webkit-box-shadow:0 3px 0 0 #401d0d;
 box-shadow:0 3px 0 0 #401d0d;
 background-color:#5c2912;
}

Is there a certain style I'm using here that isn't compatible with React?

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
learnerforlife
  • 189
  • 1
  • 3
  • 15
  • 1
    How are you importing this css file into the app.js? A complete codepen example would help. – mbhargav294 May 06 '19 at 19:14
  • Your question made me look over my import statements and I commented out an ```import bootstrap css``` statement that I had in my index.js. Works fine now! Not sure why that import statement was messing up my styles? – learnerforlife May 06 '19 at 20:21
  • 1
    All your css selectors are on element level. Bootstrap might have similar selectors that are overriding your styles. You should use classes as selectors or look into localizing your css if you want to implement bootstrap styles alongside your custom styles. – mbhargav294 May 06 '19 at 20:26
  • How would I go about localizing my css? Or would it be easier/more efficient to use classes as selectors? – learnerforlife May 06 '19 at 20:37
  • 1
    For localizing you should use CSS modules, this SO answer explains more about them: https://stackoverflow.com/a/47090832/2615754. If this is an overkill for your project, stick with classes. But I recommend using CSS modules, I improves the maintainability of your project as well. – mbhargav294 May 06 '19 at 20:40

0 Answers0