How to correctly import styles?

[cobbdan]

System details

• OS:
• Enviroment to run:
  • Web
  • VSCode Amazon Q Chat
  • JetBrains IntelliJ Amazon Q Chat

Question

I downloaded the light and dark themes from the theme builder (https://aws.github.io/mynah-ui/) and loaded them in my page, but there seems to be some styles that are missing. Is there another stylesheet I need somewhere? It looks like there are a bunch of extra styles coming from "styles.scss" that aren't in the theme files.

There are lots of little things missing, but here's one example:

Style cascade from the live demo:

Style cascade from my page:

[cobbdan]

An update on this, @avi-alpert was able to track down how other projects are getting the missing style rules and they are including the following rules manually:

                body,
                html {
                    background-color: var(--mynah-color-bg);
                    color: var(--mynah-color-text-default);
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                }

I'm not entirely sure how they knew to do that, but is it a bug that these rules aren't included in the downloaded theme files?

[dogusata]

Hi, currently when you load the css files it is enough. However mynah-ui doesn't know where you put it's main wrapper in. It is up to you to use those styles to handle your parent. In many of the projects, body is being used as the parent of mynah-ui. Even though it is not mandatory, to make the look as expected, it needs to be used this way.

It is available both in the documentations and the sample app too.