Muil

Muil

  • Docs
  • Configurations
  • API
  • Blog

›Getting Started

Getting Started

  • Quick Start Guide
  • Slow Start Guide
  • Run Templates Viewer
  • Write Template
  • Styling Template
  • Solutions
  • Why Muil

Configurations

  • CLI
  • Custom Webpack Config
  • Custom Babel Config

API

  • Authorization
  • Sending Email
  • Generating PDF
  • Generating Image
  • Generating HTML

Email Limitations

  • Fonts
  • SVG

Components

  • Intro
  • Grid
  • Style
  • Alignment
  • Typography
  • Button
  • Callout
  • Menu
  • Spacer
  • Wrapper
  • Charts
  • PDF Page

Styling Template

CSS

CSS is supported out of the box:

import React from 'react';
import './app.css';

const Button = () => (
    <button className='button'>Click Me</button>
);

export default Button;

class names will be shared across all templates!

CSS Modules

CSS Modules is supported by creating css files with the extention .module.css:

import React from 'react';
import './Button.module.css';

const Button = () => (
    <button className='button'>Click Me</button>
);

export default Button;

class names will be unique for the specific template

Styled Components

To use styled-components just install styled-components and use it:

import React from 'react';
import styled from 'styled-components`

const PrimaryButton = styled.button`
    color: red;
`;

const Button = () => (
    <PrimaryButton>Click Me</PrimaryButton>
);

export default Button;

You can add babel-plugin-styled-components by creating a custom babelrc.

← Write TemplateSolutions →
  • CSS
  • CSS Modules
  • Styled Components
Copyright © 2021 muil