Show usage of all:initial

products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/JBrowseLinearGenomeView.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import createSessionModel from '../createModel/createSessionModel'
 import ModalWidget from './ModalWidget'
 import ViewContainer from './ViewContainer'
-import './App.css'
 
 type Session = Instance<ReturnType<typeof createSessionModel>>
 function JBrowseLinearGenomeView({
@@ -21,7 +20,9 @@ function JBrowseLinearGenomeView({
   const { ReactComponent } = viewType
 
   return (
-    <div className="yui3-cssreset">
+    // avoid parent styles getting into this div
+    // https://css-tricks.com/almanac/properties/a/all/
+    <div style={{ all: 'initial' }}>
       <ViewContainer key={`view-${view.id}`} view={view}>
         <ReactComponent model={view} session={session} />
       </ViewContainer>

products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx

@@ -70,6 +70,27 @@ export const OneLinearGenomeView = () => {
   )
 }
 
+export const OneLinearGenomeViewWithOutsideStyling = () => {
+  const state = createViewState({
+    assembly,
+    tracks,
+    defaultSession,
+    location: 'ctgA:1105..1221',
+    onChange: patch => {
+      // eslint-disable-next-line no-console
+      console.log('patch', patch)
+    },
+  })
+  return (
+    <div style={{ textAlign: 'center', fontFamily: 'monospace' }}>
+      <h2>Hello world, this is centered but not affecting the internal LGV</h2>
+      <ThemeProvider theme={theme}>
+        <JBrowseLinearGenomeView viewState={state} />
+      </ThemeProvider>
+    </div>
+  )
+}
+
 export const TwoLinearGenomeViews = () => {
   const state1 = createViewState({
     assembly,