4

I am trying to add border-radius: 5px to React-datetime component using className but not working.

E.g:

  import ReactDateTime from ‘react-datetime’;

<ReactDateTime className=‘datetime’ />

 .datetime{
 border-radius: 5px;
 }

I know that react-datetime module provides seperate css styles. But my concern is why it is not accepting when I do using className.

Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
  • Did you try defining the css in another file and importing it to the component? Are you using create react app or webpack? – codejockie Jan 03 '18 at 09:45
  • Yes my css styles are in different file and included in index.html. Yes I am using webpack – Hemadri Dasari Jan 03 '18 at 12:23
  • If that's the case, you might want import the css with webpack and bundling it just like you do the JS files, though you'd need a loader for that, `style-loader` and `css-loader`. – codejockie Jan 03 '18 at 16:48

2 Answers2

5

Try using inputProps with className as like below. It should work.

<DateTime inputProps={{className:'datetime'}} />
user8599269
  • 241
  • 1
  • 11
0

Have you try to add !important like :

.datetime{
    border-radius: 5px !important;
}

If it doesn't work it could probably be an override problem.

You will have probably to check here : https://github.com/YouCanBookMe/react-datetime/blob/master/example/react-datetime.css

If it doesn't work can we see your config for this package ? We need to have a look on your complete component and css stylesheet

Benoit Chassignol
  • 289
  • 2
  • 11
  • Yes I tried with !important as well but not working. Sorry this is my office project I can’t share such big config file and as well component. But I inspected and changed border-radius on .form-control and it worked but through css with class name is not working. Any other suggestions please because it’s huge file and I can’t even take snapshot. – Hemadri Dasari Jan 03 '18 at 12:27
  • Have you try to use "double quotes" instead of this : ‘ ’ ? – Benoit Chassignol Jan 03 '18 at 13:05
  • Yes I tried with double quotes but it didn’t work. It worked with inputProps. – Hemadri Dasari Jan 04 '18 at 06:25