src/material/Label.js
import React from 'react';
import PropTypes from 'prop-types';
function getStyles(props, context) {
const { style } = props;
return Object.assign({
padding: `${context.muiTheme.baseTheme.spacing.desktopGutter / 2}px ${context.muiTheme.baseTheme.spacing.desktopGutter}px`,
background: context.muiTheme.baseTheme.palette.accent3Color,
color: 'white',
textTransform: 'uppercase',
}, style);
}
/**
* @desc
* Default styles:
* ```
* {
* padding: `${context.muiTheme.baseTheme.spacing.desktopGutter / 2}px ${context.muiTheme.baseTheme.spacing.desktopGutter}px`
* background context.muiTheme.baseTheme.palette.accent3Color,
* color: 'white',
* textTransform: 'uppercase'
* }
* ```
*/
class Label extends React.Component {
/**
* @type {Object}
* @property {Node} children child nodes
* @property {string} className class
* @property {Object} style styles
*/
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
style: PropTypes.object,
};
/**
* @type {Object}
* @property {Object} muiTheme theme
*/
static contextTypes = {
muiTheme: PropTypes.object.isRequired,
};
/**
* @return {Node}
*/
render() {
const styles = getStyles(this.props, this.context);
return (
<div style={styles}>{this.props.children}</div>
);
}
}
export default Label;