Need a way to target h1-h6 for theme styling

[ChristopherHButler]

I am trying to adjust the styling for h1-h6 using a javascript object passed it but I cannot target headers.
I am using this package with styled components. This is what I am trying now but the styling does not take. I have also tried h1-h6 as the keys and also not working.

  const [theme, setTheme] = useState(false);
  const darkTheme = {
    background: shades.MIDNIGHT_BLACK,
    color: shades.WHITE,
  };

  const lightTheme = {
    background: shades.WHITE,
    color: shades.BLACK,
    '.wmde-markdown h1': { color: shades.BLACK, },
    '.wmde-markdown h2': { color: shades.BLACK, },
    '.wmde-markdown h3': { color: shades.BLACK, },
    '.wmde-markdown h4': { color: shades.BLACK, },
    '.wmde-markdown h5': { color: shades.BLACK, },
    '.wmde-markdown h6': { color: shades.BLACK, },
  };

  const themeStyle = theme ? lightTheme : darkTheme;

  return (
    <Root>
      <StyledRow>
        <StyledSpan>Markdown Theme</StyledSpan>
        <Switch
          checkedChildren="☀️"
          unCheckedChildren="🌙"
          onChange={() => setTheme(!theme)}
        />
      </StyledRow>
      <MarkdownPreview
        source={selectedFile.content}
        style={{ height: '100%', ...themeStyle }}
      />
    </Root>

  )

[jaywcjlove]

@ChristopherHButler Use className?

[ChristopherHButler]

"className - string Class name of the container element. If none is passed, a container will not be rendered." - I did not interpret this to mean you could affect the styling of the rendered markdown, rather the container div?

[jaywcjlove]

@ChristopherHButler Use className to override the style of internal child nodes.

[ChristopherHButler]

Sorry but is there an example? how I can change the color of an h3 @jaywcjlove ?
I have tried:

className={'.wmde-markdown h3: { color: "black" }'}
className={'.wmde-markdown h3 { color: "black" }'}
className={'.wmde-markdown: { color: "black" }'}
className={'.wmde-markdown { color: "black" }'}

none of these seem to work.

[jaywcjlove]

className="myapp"

in xxx.css

.myapp h3 { color:  black !important; }

[ChristopherHButler]

Ok this needs to be in a css file. I am using styled components (as mentioned in the initial issue) so I guess this won't work?

[ChristopherHButler]

I got this working with styled components. If anyone else is interested here is what I did:

const MarkdownViewerPanel = ({ selectedFile }) => {

  // Not good practice but for simplicity using boolean values to toggle markdown theme.
  // false = dark theme, true = light theme.
  const [theme, setTheme] = useState(false);

  const darkTheme = {
    background: shades.MIDNIGHT_BLACK,
    color: shades.WHITE,
    code: shades.BLACK,
  };

  const lightTheme = {
    background: shades.WHITE,
    color: shades.BLACK,
    code: shades.BLACK,
  };


  return (
    <Root theme={theme ? lightTheme : darkTheme}>
      <StyledRow>
        <Tooltip title="Markdown Theme" placement="bottomLeft">
          <Switch
            checkedChildren="☀️"
            unCheckedChildren="🌙"
            onChange={() => setTheme(!theme)}
          />
        </Tooltip>
      </StyledRow>
      <MarkdownPreview
        source={selectedFile.content}
        // className={theme ? 'light' : 'dark'}
        style={{ height: '100vh', overflow: 'auto', padding: '8px' }}
      />
    </Root>
  )
}

MarkdownViewerPanel.propTypes = {
  selectedFile: PropTypes.object.isRequired,
};

export default MarkdownViewerPanel;





const Root = styled.div`
  display: flex;
  flex-direction: column;

  height: 100vh;

  background: ${props => props.theme.background};
  color: ${props => props.theme.color};

  h1 {
    color: ${props => props.theme.color};
  }
  h2 {
    color: ${props => props.theme.color};
  }
  h3 {
    color: ${props => props.theme.color};
  }
  h4 {
    color: ${props => props.theme.color};
  }
  h5 {
    color: ${props => props.theme.color};
  }
  h6 {
    color: ${props => props.theme.color};
  }
  code {
    color: ${props => props.theme.code};
  }
`;

const StyledRow = styled(Row)`
  justify-content: flex-end;
  align-items: center;
  background: ${colors.SECONDARY_BACKGROUND};
  padding: 5px 10px;
`;

const StyledSpan = styled.span`
  font-size: 0.8rem;
  margin: 0px 8px 0px 0px;
`;