Related issues: #7.

A reusable component may need to set a style that it wants to be overridable. For instance,

function MyComponent({style, ...rest}) {
  return <div role="" style={{outline: '1px solid blue', ...style}} {...rest}></div>
}

Structurally it may be important for the component to have an outline. At the same time, provided it's substituted safely, it should be overridable. The example above allows override by passing the style prop. But that would only work with inline styling. A styled-components, for instance, would be unable to override it because it works via stylesheet.

Some possible options:

1. Try again to find a safe way to deploy stylesheets for components and use the predefined classes, e.g. className={${props.className || ''} amp-component}. So far, however, we didn't find a non-fragile way to deploy stylesheets.
2. Cancel default styles. E.g. <AmpComponent disableDefaultStyles>. This is a very rough flag however. The user may want to override only some of the styles.
3. Cancel style-by-style. E.g. <AmpComponent className="myclass" style={{outline: ''}}>. This will work, but a bit cryptic and also fragile. E.g. for now styles may use outline and tomorrow decide to switch to outline-color. CSS is smart enough to override it all. But style map may or may not work well for this. And even then, this is not very ergonomic. Basically, the component user must cancel the same styles on every use.