How to override default CSS

[connect-platform]

How to override default CSS

[loreanvictor]

Sort of. Basically the component styles are added after the page is processed (so that all components are collected from the page), while these styles are injected while the page is being generated. Since this behavior means you need to be a bit more specific with global CSS (which is generally not the recommended method anyways), I kept it around.

This means, in your case, being a bit more specific should do the trick, for example perhaps changing the style selector to iframe.utterances-frame or .utterances iframe.

If you really want to override the styles, you can add your style element directly to .codedoc/content/index.tsx (first thing inside the <Page> component).

[TysonMN]

Yes, using iframe.utterances-frame worked from that global location. I will make it more specific later.

One last thing.

How is line 153...

codedoc/src/components/page/style.ts

Lines 149 to 155 in cdb1b59

	iframe: {
	width: '100%',
	borderRadius: 3,
	border: 'none',
	background: 'white',
	},

...consistent with

Integrated Dark Mode
Its 2020, and dark-mode should be considered a universal right! Codedoc supports dark-mode on all your docs.

A universal right for all HTML elements except iframe? ;)

Is it because iframe is not considered a "doc"?

[loreanvictor]

A universal right for all HTML elements except iframe? ;)

Is it because iframe is not considered a "doc"?

:))))

iframe also has that right, unfortunately it falls out of CODEDOC's jurisdiction though. many websites do not even support the OS preference, I believe a good portion of operating systems don't even have such a preference, and there is no standard method for communicating CODEDOC's user preference (which can be set despite lack of OS support) to iframes. as a result, changing iframe's background based on dark mode often times results in content of the iframe not being readable. that is also why the default background is white, in case a website has not set any background color but have assumed a white background (which is the default behavior).

[TysonMN]

Yes, that works. I have never seen this before. Thanks for the help! :D

[TysonMN]

Ah, someone reported the same issue against utterance
utterance/utterances#290

[TysonMN]

Quoting utterance/utterances#290 (comment)

So simply adding a css rule to give the <iframe> element a transparent background should solve it.

Yes, I figured out that much last night as well. If I add the CSS

iframe {
  background: transparent
}

to the bottom of styles/codedoc-styles.css, then the problem is fixed.

How do I have CODEDOC put this CSS into this generated file?

[loreanvictor]

styles/codedoc-styles.css includes all styles for CODEDOC components, so you can simply add some styling for your component. Using component style is the recommended way as well since it ensures this style is only affecting this particular component and not all <iframe>s on the page.

Besides that, you can also add global scripts and stylesheets.

[TysonMN]

Is the problem line 153?

codedoc/src/components/page/style.ts

Lines 149 to 155 in cdb1b59

	iframe: {
	width: '100%',
	borderRadius: 3,
	border: 'none',
	background: 'white',
	},

Can that be removed?

[loreanvictor]

That is a default styling to ensure that the typical <iframe> fits in well with the rest of the content, while also preserving its own intended style.

[TysonMN]

I plan to change to a more targeted solution, but first I just wanted to get something working.

I wanted to try the global approach first, but it is not as global as I expected.

stylesheets: [
  <style>{`
    iframe {
      background: transparent
    }
  `}</style>
]

My global styling got added before the styling by CODEDOC, so the CODEDOC styling overrode my styling.

Is this the intended behavior?

[TysonMN]

Thanks for all these thorough answers. I am learning a lot from you! :)

[TysonMN]

I got a local solution working with this code in the index.tsx files of my custom component.

return <div>
         <style>
          {`
            iframe.utterances-frame {
              background: transparent
            }
          `}
         </style>
         <script src='https://utteranc.es/client.js'
                 {...attributes}
                 async />
       </div>

My attempts to move the style to a style.ts file as shown in the custom component documentation all failed :(

[loreanvictor]

@bender2k14 that is not a local solution. You are basically adding a redundant style element per component instance, which is generally not a good idea.

Why your attempts for using component styles failed? Perhaps I could assist on that front.

[TysonMN]

Thanks for offering to help :)

I will describe my most recent attempt, which is also available in this branch.

I am trying to follow the example in the Custom Component documentation. To avoid introducing problems, I only changed things if I thought it was necessary. So the name "card" is still used in some places.

This approach doesn't work. The background of the iframe in question is still white.

Here is my style.ts

import { themedStyle } from '@connectv/jss-theme';
import { CodedocTheme } from '@codedoc/core';


export const CardStyle = themedStyle<CodedocTheme>(theme => ({
card: {
   'iframe.utterances-frame': { background: 'transparent' },
 }
}));

Here is my index.tsx

import { ThemedComponentThis } from '@connectv/jss-theme';
import { RendererLike } from '@connectv/html';
import { CodedocTheme } from '@codedoc/core';

import { CardStyle } from './style';


export interface UtterancesOptions {
  theme: string;
}


export function Utterances(
  this: ThemedComponentThis,
  options: UtterancesOptions,
  renderer: RendererLike<any, any>,
) {
  const classes = this.theme.classes(CardStyle);
  let theme = 'github-light';
  if (options && options.theme && options.theme !== '') theme = options.theme;
  const attributes = {
    'repo': 'bender2k14/tyson-williams-blog',
    'issue-term': 'pathname',
    'label': '💬comments',
    'theme': theme,
    'crossorigin': 'anonymous'
  }
  return <div class={`${classes.card}`}>
           <script src='https://utteranc.es/client.js'
                   {...attributes}
                   async />
         </div>
}

[loreanvictor]

I suspect changing your style.ts to this would work:

import { themedStyle } from '@connectv/jss-theme';
import { CodedocTheme } from '@codedoc/core';


export const CardStyle = themedStyle<CodedocTheme>(theme => ({
  card: {
     '& iframe.utterances-frame': { background: 'transparent' },
   }
}));

According to JSS docs for nested selectors.

[loreanvictor]

Yes JSS takes a bit of getting used to, since it looks a lot like CSS but you need to constantly remind yourself that its actually just JS ;-)