🚧 Extending Styles

Extending Styles

README.md

@@ -1,3 +1,5 @@
-## React Styled Component
+## React Styled Component 💅
 
 1. [Basic Styled Component](https://github.com/SaishJ/React-Styled-Components/commit/5488492b54661fec964a4202f9a1a79461b8534e)
+
+2. [Using Props](https://github.com/SaishJ/React-Styled-Components/commit/43ad56cf0bf7906c39d9494c8d0fe2ce2bcae9d3)

src/App.js

@@ -1,6 +1,6 @@
 import "./App.css";
 // import styled from "styled-components";
-import StyledButton from "./component/Button";
+import StyledButton, { FancyButton } from "./component/Button";
 
 // const StyledButton = styled.button`
 //   border: 2px solid #4caf50;
@@ -24,6 +24,11 @@ function App() {
         <br />
       </div>
       <StyledButton variant="outline">Styled Button</StyledButton>
+      <div>
+        <br />
+      </div>
+      <FancyButton as="a">Fancy Button</FancyButton>
+      {/* as - is a polymorphic prop => pass anchor tag */}
     </div>
   );
 }

src/component/Button.js

@@ -1,17 +1,4 @@
-import styled from "styled-components";
-
-const StyledButton = styled.button`
-  border: 2px solid #4caf50;
-  background-color: ${(props) =>
-    props.variant === "outline" ? "#fff" : "#4caf50"};
-  color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
-  padding: 15px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 12px;
-  cursor: pointer;
-  transition: 0.5s all ease-out;
-`;
+import { StyledButton, FancyButton } from "./Button.styles";
 
 export default StyledButton;
+export { FancyButton };

src/component/Button.styles.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const StyledButton = styled.button`
+  border: 2px solid #4caf50;
+  background-color: ${(props) =>
+    props.variant === "outline" ? "#fff" : "#4caf50"};
+  color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
+  padding: 15px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+  cursor: pointer;
+  transition: 0.5s all ease-out;
+`;
+
+export const FancyButton = styled(StyledButton)`
+  background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
+  border: none;
+`;