CODEWITHSUNDEEP
javascripthtmlcssreactjsstyled-components
pyjamas
pyjamas

Reputation: 5399

Inherit CSS classes in styled-components definitions?

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;
}

Upvotes: 3

Views: 1009

Answers (3)

Anton
Anton

Reputation: 8508

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>
  );
};

Upvotes: 1

pyjamas
pyjamas

Reputation: 5399

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;

Upvotes: 3

Charu
Charu

Reputation: 19

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;
}

Upvotes: 0

Related Questions