ReactJS styles 'leaking' to other components

That's the expected behaviour.

No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM. Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.

If you want to specify css files for each component, you should also create component specific css classes. Like the following example.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  <div className="DottedBox">
    <p className="DottedBox_content">Get started with CSS styling</p> 
  </div>
);

export default DottedBox;

and its css file:

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.