JavaScript hoc/withTheme示例

示例#1

文件： ListItem.js 项目： DKCreative/play-midnight

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

import withTheme from 'hoc/withTheme';

const StyledListItem = withTheme(styled.div`
  padding: 15px 25px;
  margin: 0;
  border-bottom: 1px solid ${props => props.theme.B500};

  .ListItem__title {
    font-weight: 700;
    margin: 0 0 5px;
  }

  &:last-child {
    border: none;
  }
`);

const ListItem = ({ title, children }) => (
  <StyledListItem>
    <div className="ListItem__title">{title}</div>
    <div className="ListItem__text">{children}</div>
  </StyledListItem>
);

export default ListItem;

示例#2

文件： Checkbox.js 项目： DKCreative/play-midnight

  accent,
  background,
  dispatch,
  style,
  theme,
  checked,
  disabled,
  defaultChecked,
  onChange,
  ...rest
}) => (
  <StyledCheckbox accent={accent} background={background} style={style} theme={theme}>
    <label>
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        defaultChecked={defaultChecked}
        onChange={disabled ? noop : onChange}
        {...rest}
      />
      <div className="Checkbox__container">
        <div className="Checkbox__track" />
        <div className="Checkbox__knob" />
      </div>
    </label>
  </StyledCheckbox>
);

export default withTheme(Checkbox);