@techstars/style v0.10.6

@techstars/style

A styling library compiled with brand-specific defaults. Includes a set of JSS-specific utilities, a theme provider, and multiple branded themes.

Code Coverage

Core utilities

makeStyles()

This is the core way you will introduce styling to your components. For this, we're exposing the MaterialUI makeStyles method, namespaced to our library. We've left it unmodified because a. It is essentially a more-developed version of our preferred styling library (JSS), and b. it is thin and lightweight enough to not warrant a remake. Examples of its use are provided below, or click here to see the MUI page.

Examples

1. Simple Styling Example

import React from 'react'
import { Typography } from '@techstars/typography'
import { makeStyles } from '@techstars/style'

// you can name this function whatever you like, our convention is `useStyles`
const useStyles = makeStyles({
  root: {
    display: block,
    color: 'black',
    paddingTop: '10px',
  }
})

const Component = () => {
  // call the function and assign to a constant
  const classes = useStyles()
  return (
    <>
      // use the classes variable to attach classNames to your components  
      <Typography className={classes.root}><💅/Typography>
    </>
  )
}

withDefaults()

Wraps a component in the default Techstars theme. This prevents needing a ThemeProvider elsewhere in your app when you only require a simple, branded experience.

Exported Components

<ThemeProvider>

A wrapper component to pass the default @techstars/style theme to your component tree. If a custom theme is provided, it will override the default values where found, but leave the remaining theme object alone.

Here we're also exposing the MaterialUI ThemeProvider and context, however we have aliased it to our package and provided theme defaults. This should be pretty straightforward, feel free to use the examples below to guide you.

Examples

1. Wrapping an application with the ThemeProvider

// ... imports
import { ThemeProvider } from '@techstars/style'

const MyApp = () => (
  <>
    <ThemeProvider>
      <Typography>Test text</Typography>
    </ThemeProvider>
  </>
)

2. Creating a custom theme

// ... imports
import { ThemeProvider } from '@techstars/style'

const myTheme = {
  colors: {
   black: '#333' 
  }
}

const MyApp = () => (
  <>
    <ThemeProvider theme={myTheme}>
      <Typography>Test text</Typography>
    </ThemeProvider>
  </>
)

<CSSBasline>

A component to inject a handful of common, handy styling rules to the application. It is best placed in the root of your React app, something like App.js or _app.js

Examples

1. Injecting <CSSBasline> into your application

import React from 'react'
import { CSSBasline } from '@techstars/style'

const MyApp = () => (
  <App>
    <CSSBasline />
    {children}
  </App>
)