pioner-ant

Design library for Pioner

This project is based on Ant design.

This package will ultimately provide Pioner styled components for most Ant-components available.

Install by typing yarn add pioner-ant

The idea with this library is to provide a design library, based on Ant Design, that can be used for all Pioner products.

By default the library exports the original components from Ant, but the look and feel can easily be customized on a component level by extending the css-properties of the original components by using the styled-components pattern.

Here's an example of how to customize the Button component:

• Create a new file, button.js under src/components
• Add code according to below (and change the styling properties you like):

import { Button as _Button } from "antd";
import styled from "styled-components";

const Button = styled(_Button)`
  background-color: pink;
  color: white;
`;

export default Button;

• Remove the export of the default (original Style) component from index.js:

import _Button from "antd/lib/icon";
export { _Button as Button };

• Add the following code to index.js:

import _Button from "./components/button";
export { _Button as Button };

• Done!