Pad.js

import color from ‘color’; // a simple color helper library
import styled from ‘styled-components’;
const lighten = from => color(from).lighten(0.333).hexString();
const activeCSS = props => `
 background-color: ${lighten(props.color)} !important;
`;

export const Pad = styled.div`
 /* some styles here … */
 ${(props) => props.active ? activeCSS(props) : ‘’}
 background-color: ${({ color }) => color}
`