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