Quiero diseñar mi aplicación usando styled-components donde mis componentes heredan estilos de CSS definido globalmente existente. En el siguiente ejemplo, ¿cómo puedo hacer que Surface herede las clases .raised y .bordered para no tener que repetir className="raised bordered" en cada uso? Quiero algo similar a Composición en Emoción .
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; }Esto es factible usando attrs como se muestra a continuación
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;Si me entiende bien, desea personalizar el componente sin css externo y usarlo en cualquier parte del proyecto. La forma más fácil de usar es con accesorios. la segunda creación más compleja para cada uno de los componentes de estilo .raised y .bordered . ejemplo de la forma más fácil
Aplicación.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;Superficie.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> ); };Cuando se habla de aplicar estilo en todos los elementos del interior, funcionará agregar una clase principal para todos los elementos de la superficie.
Prueba esto-
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; }