margin: 0
to every p
tag. Browsers have default CSS properties, to avoid conflict with your design, add a reset.css file to your project's root.lang
attribute for <style>
tag.scoped
attribute, to avoid style conflicts between your components.assets
folder.lang
attribute for <style>
tag.scoped
attribute, to avoid style conflicts between your components.src
folder..scss
then change his import.*.module.scss
(don't forget to also change the import), to enable SCSS module.A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
src
folder.stylesheet.js
file in your projectThemeProvider
component injects the theme into all styled components anywhere beneath it in the component tree, via the context API. More info on styled component theming here. blue-primary
).<div>, <p>, <input> or <img>
tag. You can change these tags with <h1>, <section, <header> etc..
to improve your app semantic. These changes won't affect the current style. Be careful, Overlay doesn't generate <table> or <form>
tags. In these cases, the layout/style must be changed.<img>
tags. Then you can download all your component's assets from the component's page, tab "assets".img
tag coming from Overlay..flex-direction
property inside the mobile media query because this property is already defined in desktop and his value isn't the same for mobile.border-radius
property inside the mobile media query because this property is not defined for desktop.background-color
property inside the desktop media query because this property is not defined for mobile.flex-direction
value is overridden by the media query, it's dead code. To avoid this disagreement, we clean the class by moving all the properties with overrides.