Hello guys I been looking in the internet trying to apply defaultProps to my components but nothing is working atm.
I will show you my code:
import styled from "styled-components";
const Button = styled.button`
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 10px 20px;
border-radius: 5px;
border-style: none;
:focus {
outline: none;
}
${props =>
props.primary &&
`
background-color: ${props.theme.colors.primary};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.primary};
border-style: solid;
border-color: ${props.theme.colors.primary}
}
`}
${props =>
props.secondary &&
`
background-color: ${props.theme.colors.secondary};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.secondary};
border-style: solid;
border-color: ${props.theme.colors.secondary}
}
`}
${props =>
props.success &&
`
background-color: ${props.theme.colors.success};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.success};
border-style: solid;
border-color: ${props.theme.colors.success}
}
`}
${props =>
props.warning &&
`
background-color: ${props.theme.colors.warning};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.warning};
border-style: solid;
border-color: ${props.theme.colors.warning}
}
`}
`;
export default Button;
I just want to setup defaultProps to give some styled by default if I dont do for example:
<Button primary>Text</>
Here is another example, this is a bit different:
import React from "react";
import styled from "styled-components";
const Wrap = styled.input`
${props =>
props.primary &&
`
border: 2px ${props.theme.colors.primary} solid;
`}
${props =>
props.secondary &&
`
border: 2px ${props.theme.colors.secondary} solid;
`}
padding: 5px 10px;
background-color: transparent;
border-radius: 5px;
text-align: center;
:focus {
outline: none;
}
`;
const Input = ({
type,
onChange,
placeholder,
primary,
secondary,
className,
value,
name,
ref,
children
}) => {
return (
<Wrap
type={type}
onChange={onChange}
placeholder={placeholder}
primary={primary}
secondary={secondary}
value={value}
name={name}
ref={ref}
className={className}
>
{children}
</Wrap>
);
};
export default Input;
Any help will be useful, Im trying to make a Theme for myself as clean as possible. Thank you.
Adding defaultProps to components works out of the box, even with components created from Styled Components. You need to define the defaultProps on the component. Here's a complete example from a fresh create-react-app application:
import React from 'react';
import './App.css';
import styled from 'styled-components';
const ButtonBlue = styled.button`
background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;
ButtonBlue.defaultProps = {
actuallyMakeItGreen : true
}
function App() {
return (
<div className="App">
<ButtonBlue>Cool</ButtonBlue>
</div>
);
}
export default App;
Creates a button that looks like this:
import React from 'react';
import './App.css';
import styled from 'styled-components';
const ButtonBlue = styled.button`
background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;
function App() {
return (
<div className="App">
<ButtonBlue>Cool</ButtonBlue>
</div>
);
}
export default App;
The only thing changing here is inside the defaultProps property, where we default actuallyMakeItGreen to true rather than false.
First ensure you've passed your props into the styled component
<Button props={this.props} />
Then in your styled component you should be to format like so
const Button = styled.button`
${({ props }) => `
color: ${props.color};
`}
`
Related
I created this react app with a side bar, and it looks pretty good, but one thing I can't figure out is how to mark the item (page link) that was clicked.
Here is the code, I added activeClassName="selected" to the SidebarLink const, and added it to the styled-component, but it's not working.
import React, { useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
const SidebarLink = styled(Link)`
/*border: 3px solid green;*/
display: flex;
color: #e1e9fc;
justify-content: space-between;
align-items: center;
padding: 20px;
list-style: none;
height: 60px;
text-decoration: none;
font-size: 18px;
&:hover {
background: #252831;
border-left: 4px solid #ffbc2e;
cursor: pointer;
}
.selected {
color: red;
}
`;
const SidebarLabel = styled.span`
margin-left: 16px;
`;
/* Used for Training dropdown */
const DropdownLink = styled(Link)`
/*border: 3px solid red;*/
background: #252831;
height: 60px;
padding-left: 3rem;
display: flex;
align-items: center;
text-decoration: none;
color: #f5f5f5;
font-size: 16px;
font-weight: bold;
&:hover {
background: #48526F;
border-left: 4px solid #ffbc2e;
cursor: pointer;
}
`;
const SubMenu = ({ item }) => {
const [subnav, setSubnav] = useState(false);
const showSubnav = () => setSubnav(!subnav);
return (
<>
<SidebarLink to={item.path} onClick={item.subNav && showSubnav} activeClassName="selected" exact>
<div className="sidebarTextContainer">
<div className="sidebarIcon">{item.icon}</div>
<div className="sidebarText"><SidebarLabel>{item.title}</SidebarLabel></div>
</div>
<div>
{item.subNav && subnav
? item.iconOpened
: item.subNav
? item.iconClosed
: null}
</div>
</SidebarLink>
{subnav &&
item.subNav.map((item, index) => {
return (
<DropdownLink to={item.path} key={index}>
{item.icon}
<SidebarLabel>{item.title}</SidebarLabel>
</DropdownLink>
);
})}
</>
);
};
export default SubMenu;
Anyone got any idea please on how to fix this?
Even though you're asking about remembering which item was clicked, I think what you actually want is that the link corresponding to the current page be highlighted as active.
If you're using react-router v6, you should use NavLink instead of Link (docs).
A <NavLink> is a special kind of <Link> that knows whether or not it is "active".
By default, an active class is added to a <NavLink> component when it is active.
You should update the imported component and remove the activeClassName.
const SidebarLink = styled(NavLink)`
// ...
&.active {
color: red;
}
`
// ...
<SidebarLink to={item.path} onClick={item.subNav && showSubnav} exact>
...
</SidebarLink>
If you're using react-router v5, then you should also use NavLink but you have to pass the activeClassName, like you do in your example. In this case you simply need to substitute Link for NavLink.
Also note that you nested CSS syntax is incorrect. It is applied to the children of SidebarLink, not on SidebarLink itself. You'd want to replace .selected { color: red; } with &.selected { color: red }.
I have a main page, with a button component i create to reuse in my project. My issue is when i add the onClick event to my external component, the click event is not working, but is i create the same button inside my main page, the click event works just fine
Button Component
import React from "react";
import styled from "styled-components";
const BigButton = (props): JSX.Element => {
return <>{props.red ? <BigBtn red={props.red}>{props.val}</BigBtn> : <BigBtn>{props.val}</BigBtn>}</>;
};
export default BigButton;
const BigBtn = styled.button`
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 15px;
color: #f5f5f5;
width: 78px;
height: 30px;
background: ${(props) => (props.red ? "#BD2129" : "#2e3034")};
border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")};
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
`;
This works on main page
<button onClick={buttonClose}>Close</button>
Button Component on main page - This doesn't work on main page
<BigButton val="Cancel" onClick={handleClose} />
Close function
const handleClose = (e) => {
e.preventDefault();
props.onClose();
};
Your component does not look correct. You do not have button inside the component and onClick event. You should update like this
import React from "react";
import styled from "styled-components";
const BigButton = (props): JSX.Element => {
const handleClick = () => {
props.onClick()
}
return <>{props.red ?
<BigBtn red={props.red}>
<button onClick={handleClick}>
{props.val}
</button>
</BigBtn> :
<BigBtn>
<button onClick={handleClick}>
{props.val}
</button>
</BigBtn>}
</>
};
export default BigButton;
const BigBtn = styled.button`
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 15px;
color: #f5f5f5;
width: 78px;
height: 30px;
background: ${(props) => (props.red ? "#BD2129" : "#2e3034")};
border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")};
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
`;
i am new to TS and I have been asked to move existing JS code base to ts. I have styled component which looks like this (style.js)
import styled from "styled-components";
export const Container = styled.div`
${({ flex }) => flex && `flex: ${flex};`}
${({ flex }) => flex && `display: flex;`}
flex-direction: column;
`;
export const Label = styled.label`
display: inline-block;
color: #95aac9;
font-size: 12px;
`;
export const DefaultInput = styled.input`
border: 1px solid #dfe0eb;
background-color: transparent;
padding: 10px 12px;
border-radius: 4px;
height: 35px;
color: #888888;
font-weight: 500;
&:focus {
outline: none;
}
`;
export const GrayInput = styled.input`
border: none;
background-color: #ebf2fb;
border: 1px solid #e1e9f5;
border-radius: 5px;
padding: 5px 10px;
&:focus {
outline: none;
}
`;
I was writting types for the file where I am importing this
import React from "react";
import Label from "components/atoms/Label";
import { DefaultInput, GrayInput, NormalInput, Container } from "./styles";
export default function Input({flex, theme, ...props}:{flex:string, theme}) {
return (
<Container flex={props.flex}>
{props.label && <Label>{props.label}</Label>}
{(!props.theme || props.theme === "light") && <DefaultInput {...props} />}
{props.theme === "gray" && <GrayInput {...props} />}
{props.theme === "normal" && <NormalInput {...props} />}
</Container>
);
}
but I can't figure the type for the {...props] in export default function Input({flex, theme, ...props}:{flex:string, theme}) { and how to write it
I think this should do the work:
export default function Input({flex, theme, ...props}:{flex:string; theme: string; [rest: string]: any })
You should also use flex and theme variables directly instead of props.flex and props.theme, because you already destructured them from the passed object (props) and therefore they are not available(defined) there anymore.
What I did:
I'm passing some props to functional component Stat.jsx.
What I expected:
I need to pass some background gradient color codes as a string type prop to the Stat.jsx component to make custom color elements.
What happened:
Props aren't passing to the Stat.jsx, also props object is empty.
Stat.jsx
import React from 'react';
import styled from 'styled-components';
const Stat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => console.log(props) });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
// console.log(props) is returning object: { children: "1000", theme: {} }
export default ({ value }) => <Stat>{value}</Stat>;
Stats.jsx
import React from 'react';
import Stat from './Stat';
import styled from 'styled-components';
const Stats = styled.div`
display: flex;
`;
export default () => (
<div>
<Stats>
<Stat value="1000" background="#F4D03F, #16A085" />
</Stats>
</div>
);
Quick Fix
Because you don't pass the background prop to the actual Stat component:
export default (props) => <Stat {...props}>{props.value}</Stat>;
Explanation
A better way to illustrate the issue is by renaming your components:
import React from 'react';
import styled from 'styled-components';
const StyledStat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => console.log(props) });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
export default function Stat(props){
const { value } = props;
return (
<StyledStat {...props}>
{value}
</StyledStat>;
};
Styled components props comes from the ThemeProvider usually, this is why you see a theme props while console.logging inside your styled.div
Usually in App.js you have something like that:
// src/App.jsx
import React from 'react'
import { ThemeProvider } from 'styled-components';
const theme: {
colors: {
primary: blue,
}
}
const App = () => (
<ThemeProvider theme={theme}>
<Stat />
</ThemeProvider>
)
export default App;
you can access these attributes with
${(props) => props.theme.colors.primary }
because styled-components provides its theme props to every StyledComponents (there is a Context Provider/consumer thing behind)
import React from 'react';
import styled from 'styled-components';
const Stat = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 0 2.5em;
width: auto;
height: 2.5em;
border-radius: 0.5em;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
background: linear-gradient(160deg, ${(props) => props.theme.colors.primary} });
font-size: 1.8em;
font-family: Rubik-Medium;
color: #fff;
`;
I have a button component:
import React from 'react';
import styled from 'styled-components';
import StyledInput from './NoteWindow'
const StyledButton = styled.button`
border: none;
background: ${props => props.color};
color: white;
font-size: 1.5em;
border-radius: 10px;
padding: .3em;
width: 5em;
height: 2em;
margin-right: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
cursor: pointer;
transition: ease-in-out 250ms;
&:focus {
outline: none;
}
&:hover {
background: white;
color: ${props => props.color};
border: ${props => props.color} 1.5px solid;
transition: ease-in-out 250ms;
}
`;
const Button = ({ color, name, remove }) => {
return (
<StyledButton color={color} remove={remove} onClick={remove == 'true' ? StyledInput.value = '' : false}>{name}</StyledButton>
)
};
export default Button;
and an input component:
import React from 'react';
import Button from './Button';
import styled from 'styled-components';
const NoteWindow = (props) => {
return (
<StyledNoteWindow className="NoteWindow">
<StyledForm action="#" className="form">
<StyledInput type="text" name="title" id="title" className="inp" autoComplete="off" placeholder="Title" style={{fontSize: 60, fontWeight: 700}}/>
<StyledInput type="text" name="content" id="content" className="inp" autoComplete="off" placeholder="Content.." style={{fontSize: 20}}/>
</StyledForm>
<StyledButtonsContainer>
<Button name="Discard" color={red} remove='true'/>
<Button name="Save" color={blue}/>
</StyledButtonsContainer>
</StyledNoteWindow>
)
}
export default NoteWindow;
<Button name="Discard" color={red} remove='true'/>
Objective: if the remove attribute equales to 'true' remove the input data of the input component, else, do nothing.
Is there a way to do that? Thanks in advance.
It's telling me that there's only code so I'm adding some text