Apply Safari specific styling using React-Radium

Question

So I have a form with some input fields. I have set their font-weight to 400. It is working all fine on Chrome and Firefox but on Safari it is bolder. In Safari the font-weight is the same as that of other browsers but it is rendering it bolder. I need to change font-weight to 300 only on Safari browser. I have found an answer here CSShack for Safari only. But the thing is I am using Radium for styling my React components. This is my current styling object:

input: {
    width: '100%',
    fontFamily: ' HelveticaNeue-Medium,  Helvetica, Arial, sans-serif',
    fontSize: h3_general,
    fontWeight: 400,
    color: '#777777',
    border: '0',
    textIndent: '20px',
    background: '#FFFFFF',
    borderRadius: '4px',
    letterSpacing: '-0.26px',
    textAlign: 'left',
    lineHeight: '22px',
    height: '3rem',
    margin: '0',
    '@media only screen and (max-width: 450px)': {
      fontSize: h3_mobile
    }
  }

And I need to add the following CSS to it:

@media not all and (min-resolution:.001dpcm) { @media {    
    .safari_only {     
        font-weight: 300    
    }
}}

How can I do this in Radium?

Apply Safari specific styling using React-Radium

0 Answers0