Styled Components Conventions

styled-components.jsx

import styled, { ThemeProvider, injectGlobal } from 'styled-components';

const theme = {
  red: '#FF0000',
  black: '#393939',
  grey: '#3A3A3A',
  lightgrey: '#E1E1E1',
  offWhite: '#EDEDED',
  maxWidth: '1000px',
  bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)',  /*box shadow*/
}

//theme usage
const StyledPage = styled.div`
  background: white;
  color: ${props=>props.theme.black}; 
`

//props usage
const MyButton = styled.button`
  background: red;
  font-size: ${props => (props.huge ? props.huge : '20px')}; 
  .exclaim {
    font-size: 20px;
  }
`; //tag template literal and nested class usage, pass props, use JSX

<MyButton huge="100px  ">Click Me <span class="exclaim">!</span></MyButton>

//media query usage

const Logo = styled.h1`
  @media (max-width: 1300px){
    text-align: center;
  }
`

//global reset
injectGlobal`
  html {
    box-sizing: border-box;
    /* make rems base10 (e.g. 1.5rem = 15px) */
    font-size: 10px; 
  }
  /*best pattern for global box sizing on all elements?*/
  *,*:before,*:after { 
    box-sizing: inherit;
  }
  /* variable reference */
  a {
    text-decoration: none;
    /* using props here will not work since we are not inside the theme provider but rather injecting global, so we reference the variable directly */
    color: ${theme.black}; 
  }
`

<Logo/>


//Import styled components file:

//Navstyles.js:
import styled from 'styled-components';

const NavStyles = styled.ul`

`
//Nav.js:

import NavStyles from './styles/NavStyles';
const Nav = () => (
  <NavStyles/>
)

  
//emmet in styled components for vscode:
//User Settings > settings.json:

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

//Styled components keyframes
import styled, {keyframes} from 'styled-components';

const myAnim = keyfraames`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`