Skip to content

Instantly share code, notes, and snippets.

@Azer5C74
Created July 2, 2024 18:53
Show Gist options
  • Save Azer5C74/f7d622c185a2d4618a9381d88602ff8b to your computer and use it in GitHub Desktop.
Save Azer5C74/f7d622c185a2d4618a9381d88602ff8b to your computer and use it in GitHub Desktop.
To handle copying styles between components. With styled-components, you can easily reuse styles between components.
// npm install styled-components
import styled from 'styled-components';
export const SharedStyles = styled.div`
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
color: #333;
`;
// ComponentOne.js
import React from 'react';
import { SharedStyles } from './SharedStyles';
const ComponentOne = () => (
<SharedStyles>
Content of first div
</SharedStyles>
);
export default ComponentOne;
// ComponentTwo.js
import React from 'react';
import { SharedStyles } from './SharedStyles';
const ComponentTwo = () => (
<SharedStyles>
Content of second div
</SharedStyles>
);
export default ComponentTwo;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment