Skip to content

Instantly share code, notes, and snippets.

@drenther drenther/Button.js
Last active Jun 25, 2018

Embed
What would you like to do?
Leveraging the power of props and css helper in styled-components
/* src/components/Button.js */
import styled, { css } from 'styled-components';
import { getFontSize, getColor } from '../utils/theme';
const Button = styled.button`
font-size: ${getFontSize('smFont')};
color: ${getColor('primary')};
background: ${getColor('light')};
border-radius: 5px;
width: 150px;
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
align-self: center;
height: 30px;
border: solid 1px ${getColor('primary')};
${props =>
props.floating &&
css`
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
`};
`;
export default Button;
/* src/components/User.js */
.
.
.
/* line 16 - 30 */
const maleBorder = props =>
props.gender === 'male' ? `solid 4px ${props.theme.color.primary}` : '0';
const femaleBorder = props =>
props.gender === 'female' ? `solid 4px ${props.theme.color.primary}` : '0';
const Avatar = styled.img`
border-radius: 50%;
width: 60px;
height: 60px;
position: relative;
border-bottom: ${femaleBorder};
border-left: ${femaleBorder};
border-right: ${maleBorder};
border-top: ${maleBorder};
`;
.
.
.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.