Inherit CSS classes in styled-components definitions?

user_3620725 0
Viewed 498

I want to style my app using styled-components where my components inherit styles from existing globally defined CSS. In the example below, how can I make Surface inherit the classes .raised and .bordered so that I don't have to repeat className="raised bordered" in each usage? I want something similar to Composition in Emotion.

https://codesandbox.io/s/optimistic-ramanujan-xs8rt

App.js

import "./styles.css";
import styled from "styled-components";

const App = () => (
  <div>
    <Surface className="raised bordered">Hello World 1</Surface>
    <Surface className="raised bordered">Hello World 2</Surface>
    <Surface className="raised bordered">Hello World 3</Surface>
  </div>
);

const Surface = styled.div`
  color: darkblue;
  margin: 20px;
`;

export default App;

styles.css

.raised {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.bordered {
  border: 1px solid black;
}
styled-components reactjs css html javascript
3 Answers

This is doable using attrs as shown below

import "./styles.css";
import styled from "styled-components";

const App = () => (
  <>
    <Surface>Hello World 1</Surface>
    <Surface>Hello World 2</Surface>
    <Surface>Hello World 3</Surface>
  </>
);

const Surface = styled.div.attrs({
  className: "raised bordered"
})`
  color: darkblue;
  margin: 20px;
`;

export default App;
user_36207250

If i'm right understood, you want customize component without external css and use it anywhere in the project. Easiest way use is props. second more complex create for each .raised and .bordered it's own styles components. easiest way example

App.js

import { Surface } from "./Surface";

const App = () => (
  <div>
    <Surface bordered>Hello World 1</Surface>
    <Surface boxShadow>Hello World 2</Surface>
    <Surface bordered boxShadow>
      Hello World 3
    </Surface>
  </div>
);

export default App;

Surface.js

import styled from "styled-components";

const SurfaceStyle = styled.div`
  color: darkblue;
  margin: 20px;
  ${({ bordered }) => bordered && "border: 1px solid black"};
  ${({ boxShadow }) =>
    boxShadow && "box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;"}
`;

export const Surface = ({ bordered, boxShadow, children }) => {
  return (
    <SurfaceStyle bordered={bordered} boxShadow={boxShadow}>
      {children}
    </SurfaceStyle>
  );
};
user_155451160

When talking about applying styling on all the elements inside, adding a parent class for all the Surface elements will work.

Try this-

App.js

const App = () => (
  <div className="combined">
    <Surface className="raised bordered">Hello World 1</Surface>
    <Surface className="raised bordered">Hello World 2</Surface>
    <Surface className="raised bordered">Hello World 3</Surface>
  </div>
);

Styles.css

.combined div {
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
user_148735740
Related