❤
npm
Sign UpSign In

@thepeaklab/styled-material-ui

0.2.30 • Public • Published

Description

Style material ui components with the awesome styled-components library.

How to install

npm install @thepeaklab/styled-material-ui --save

How does it work

Material UI has its own documentation for the integration of the styled-components library. However, one quickly notices that subordinate components cannot be addressed directly. This is possible with this library.

We write all component keys from the Material UI documentation as CSS classes to the respective components and their child components. Thus it is possible to style the components via CSS classes.

TextField Example

import React from "react";
import styled from "styled-components";
import { TextField } from "@thepeaklab/styled-material-ui";
import Selectors from "@thepeaklab/styled-material-ui/Selectors";

const StyledTextField = styled(TextField)`
  ${Selectors.TextField.Input} {
    background-color: #eeeeee;
  }
`;

export default () => <StyledTextField name="my-textfield" />;

Button Example

import React from "react";
import styled from "styled-components";
import { Button } from "@thepeaklab/styled-material-ui";
import Selectors from "@thepeaklab/styled-material-ui/Selectors";

const StyledButton = styled(Button)`
  ${Selectors.Button.Root} {
    border-radius: 10px;
  }

  ${Selectors.Button.ContainedPrimary} {
    background-color: #eeeeee;

    &:hover {
      background-color: #cccccc;
    }
  }
`;

export default () => <StyledButton color="primary" variant="contained" />;

Available Material-UI Components

Readme

Keywords

Package Sidebar

Install

npm i @thepeaklab/styled-material-ui

Repository

github.com/cweise/styled-material-ui

Homepage

github.com/cweise/styled-material-ui#readme

Weekly Downloads

2

Version

0.2.30

License

ISC

Unpacked Size

66.9 kB

Total Files

51

Last publish

Collaborators

  • hackingharold
  • dennisschneider
Try on RunKit
Report malware