styled-components ts conflict

elastic · Jul 19, 2019 · fab3996 · fab3996
1 parent 6d19a5a
commit fab3996
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/x-pack/legacy/plugins/code/public/components/diff_page/diff.tsx b/x-pack/legacy/plugins/code/public/components/diff_page/diff.tsx
@@ -58,11 +58,18 @@ const TopBarContainer = styled.div`
   justify-content: space-between;
 `;
 
-const Accordion = styled(EuiAccordion)`
-  border: ${theme.euiBorderThick};
-  border-radius: ${theme.euiSizeS};
-  margin-bottom: ${theme.euiSize};
-`;
+// @types/styled-components@3.0.1 does not yet support `defaultProps`, which EuiAccordion uses
+// Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
+// const Accordion = styled(EuiAccordion)`
+//   border: ${theme.euiBorderThick};
+//   border-radius: ${theme.euiSizeS};
+//   margin-bottom: ${theme.euiSize};
+// `;
+const accordionStyles = {
+  border: theme.euiBorderThick,
+  borderRadius: theme.euiSizeS,
+  marginBottom: theme.euiSize,
+};
 
 const Icon = styled(EuiIcon)`
   margin-right: ${theme.euiSizeS};
@@ -103,7 +110,8 @@ const onClick = (e: MouseEvent<HTMLDivElement>) => {
 };
 
 const Difference = (props: { fileDiff: FileDiff; repoUri: string; revision: string }) => (
-  <Accordion
+  <EuiAccordion
+    style={accordionStyles}
     initialIsOpen={true}
     id={props.fileDiff.path}
     buttonContent={
@@ -135,7 +143,7 @@ const Difference = (props: { fileDiff: FileDiff; repoUri: string; revision: stri
       language={props.fileDiff.language!}
       renderSideBySide={true}
     />
-  </Accordion>
+  </EuiAccordion>
 );
 
 export class DiffPage extends React.Component<Props> {