add classNames to various places to allow for more control of styling

src/common-elements/fields-layout.ts

@@ -74,7 +74,9 @@ export const PropertyNameCell = withProps<{ kind?: string }>(styled(PropertyCell
   ${extensionsHook('PropertyNameCell')};
 `;
 
-export const PropertyDetailsCell = styled.td`
+export const PropertyDetailsCell = styled.td.attrs({
+  className: 'property-details-cell',
+})`
   border-bottom: 1px solid #9fb4be;
   padding: 10px 0;
   width: ${props => props.theme.schema.defaultDetailsWidth};

src/common-elements/fields.ts

@@ -36,7 +36,9 @@ export const TypeTitle = styled(FieldLabel)`
 
 export const TypeFormat = TypeName;
 
-export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
+export const RequiredLabel = styled(FieldLabel.withComponent('div')).attrs({
+  className: 'required-label',
+})`
   color: ${props => props.theme.schema.requireLabelColor};
   font-size: ${props => props.theme.schema.labelsTextSize};
   font-weight: normal;

src/common-elements/headers.ts

@@ -33,7 +33,9 @@ export const H3 = styled.h2`
   ${extensionsHook('H3')};
 `;
 
-export const RightPanelHeader = styled.h3`
+export const RightPanelHeader = styled.h3.attrs({
+  className: 'right-panel-header',
+})`
   color: ${({ theme }) => theme.rightPanel.textColor};
 
   ${extensionsHook('RightPanelHeader')};

src/common-elements/panels.ts

@@ -15,6 +15,7 @@ export const MiddlePanel = styled.div`
 export const Section = withProps<{ underlined?: boolean }>(
   styled.div.attrs({
     [SECTION_ATTR]: props => props.id,
+    className: 'section',
   } as any),
 )`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;

src/common-elements/shelfs.tsx

@@ -1,3 +1,4 @@
+import * as classnames from 'classnames';
 import * as React from 'react';
 import styled, { withProps } from '../styled-components';
 
@@ -19,7 +20,7 @@ class IntShelfIcon extends React.PureComponent<{
   render() {
     return (
       <svg
-        className={this.props.className}
+        className={classnames(this.props.className, 'shelf-icon')}
         style={this.props.style}
         version="1.1"
         viewBox="0 0 24 24"

src/components/ApiInfo/ApiInfo.tsx

@@ -71,7 +71,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
       null;
 
     return (
-      <Section>
+      <Section className="api-info-section">
         <Row>
           <MiddlePanel className="api-info">
             <ApiHeader>

src/components/ApiLogo/ApiLogo.tsx

@@ -22,8 +22,9 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
         alt={altText}
       />
     );
+
     return (
-      <LogoWrap>
+      <LogoWrap className="api-logo">
         {info.contact && info.contact.url ? LinkWrap(info.contact.url)(logo) : logo}{' '}
       </LogoWrap>
     );

src/components/Markdown/SanitizedMdBlock.tsx

@@ -18,11 +18,11 @@ export function SanitizedMarkdownHTML(
     <OptionsConsumer>
       {options => (
         <Wrap
+          {...props}
           className={'redoc-markdown ' + (props.className || '')}
           dangerouslySetInnerHTML={{
             __html: sanitize(options.untrustedSpec, props.html),
           }}
-          {...props}
         />
       )}
     </OptionsConsumer>

src/components/Operation/Operation.tsx

@@ -48,7 +48,7 @@ export class Operation extends React.Component<OperationProps> {
         {options => (
           <OperationRow>
             <MiddlePanel>
-              <H2>
+              <H2 className="operation-heading">
                 <ShareLink to={operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>

src/components/RequestSamples/RequestSamples.tsx

@@ -26,7 +26,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
         <div>
           <RightPanelHeader> Request samples </RightPanelHeader>
 
-          <Tabs defaultIndex={0}>
+          <Tabs className="right-panel-tabs" defaultIndex={0}>
             <TabList>
               {hasBodySample && <Tab key="payload"> Payload </Tab>}
               {samples.map(sample => (

src/components/ResponseSamples/ResponseSamples.tsx

@@ -25,7 +25,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
         <div>
           <RightPanelHeader> Response samples </RightPanelHeader>
 
-          <Tabs defaultIndex={0}>
+          <Tabs className="right-panel-tabs" defaultIndex={0}>
             <TabList>
               {responses.map(response => (
                 <Tab className={'tab-' + response.type} key={response.code}>

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -88,7 +88,9 @@ const AuthHeaderColumn = styled.div`
   flex: 1;
 `;
 
-const SecuritiesColumn = styled.div`
+const SecuritiesColumn = styled.div.attrs({
+  className: 'securities-column',
+})`
   width: ${props => props.theme.schema.defaultDetailsWidth};
 `;
 
@@ -114,7 +116,7 @@ export class SecurityRequirements extends React.PureComponent<SecurityRequiremen
       return null;
     }
     return (
-      <Wrap>
+      <Wrap className="security-requirements">
         <AuthHeaderColumn>
           <AuthHeader>Authorizations: </AuthHeader>
         </AuthHeaderColumn>

src/components/SecuritySchemes/SecuritySchemes.tsx

@@ -70,7 +70,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
       <Section id={scheme.sectionId} key={scheme.id}>
         <Row>
           <MiddlePanel>
-            <H2>
+            <H2 className="security-defs-heading">
               <ShareLink to={scheme.sectionId} />
               {scheme.id}
             </H2>

src/components/SideMenu/SideMenu.tsx

@@ -21,7 +21,7 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
           wheelPropagation: false,
         }}
       >
-        <MenuItems items={store.items} onActivate={this.activate} root={true} />
+        <MenuItems className="side-menu-items" items={store.items} onActivate={this.activate} root={true} />
         <RedocAttribution>
           <a target="_blank" href="https://github.com/Rebilly/ReDoc">
             Documentation Powered by ReDoc