Closed daturon closed 7 years ago
@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;
`
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: