Figure out how to isolate the css of the component

[pietrop]

As a component it be great if there was a way to "insulate" the internal CSS from a parent component where this might be used.

• [ ] More research to figure out if this is possible, and limitations.

[pietrop]

Interesting blog post on option for CSS in React

At the moment when using this component, the host react app needs to be using css modules, these come by default with create react app v2 so might not be a problem. 



Otherwise, eg if not using create-react-app but using webpack then it needs the config in webpack (webpack.config.js) to have style loader and css loader both for css and for css modules

module: {
    rules: [
        ...
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.module\.css$/,
        loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        ],
      },
...

In future refactor to encapsulate CSS could consider using styled-components (?)