React-md: BEM methodology

[daturon]

I was faced with an interesting problem of combining the BEM methodology and the library of react-md. How do I write a CSS using SASS or some other CSS preprocessor and don't produce wild nesting for avoid overlapping styles from react-md? :confused:

[mmmoli]

@daturon I dropped BEM thinking tbh when I started using this lib. I've found that it's not really necessary, and when it is, you can get away with StyledComponents instead. Here's a snippet from some code we have:

import React from "react";
import {Link} from "react-router";
import styled from "styled-components";

const StyledLink = styled(Link)`
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
`;

const Heading = styled.h2`
    margin: 2em 0 0 !important
`;

class GroupHeading extends React.PureComponent {
  render() {
    return (
      <Heading className="md-caption display-override">
        <StyledLink to={this.props.to}>
          {this.props.children}
        </StyledLink>
      </Heading>
    )
  }
}

export default GroupHeading

There's not really much react-md about it, but where necessesary you can use this method to override styles. Here's another snippet:

const OkrPaper = styled(Paper)`
  position: relative;
  min-height: 60px;
`