I have button.js:
import React from "react";
import styled from "styled-components";
const StyledButton = styled.TouchableOpacity`
border: 1px solid #fff;
border-radius: 10px;
padding-horizontal: 10px;
padding-vertical: 5px;
`;
const StyledButtonText = styled.Text`
color: #fff;
font-size: 12;
`;
export default ({ children }) => (
<StyledButton>
<StyledButtonText>{children.toUpperCase()}</StyledButtonText>
</StyledButton>
);
And its usage:
import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";
const StyledNavView = styled.View`
justify-content: flex-end;
flex-direction: row;
background: #000;
padding-horizontal: 10px;
padding-vertical: 10px;
`;
const StyledTodayButton = styled(Button)`
margin: 10px;
`;
export default class Nav extends Component {
render() {
return (
<StyledNavView>
<StyledTodayButton>Today</StyledTodayButton>
<Button>Previous</Button>
</StyledNavView>
);
}
}
Problem is, the margin I apply in StyledTodayButton is actually never applied. Have I misunderstood extending styles in Styled Components?
There are 2 ways to make it work:
extend button style:
const StyledTodayButton = Button.extend'margin: 10px'
pass prop to button:
const Button = styled.button'
/* ...your props */
margin: ${props => props.withMargin ? '10px' : '0px'};
and then call in render method you can invoke it with:
<Button withMargin {...restProps} />
Related
I am using react styled components and want to create a toggle functionality or the Link components.
The first step I took was to create the useMediaQueries hook and use min-width and max-width to delimit the pixels.
import { useMediaQuery } from 'react-responsive'
// Media queries
const isDesktop = useMediaQuery({ query: '(min-width: 700px)' });
const isMobile = useMediaQuery({ query: '(max-width: 700px)' });
After this, I created the styled components and moved them into separate file called Header.styles.js:
import { Link } from "react-router-dom";
import styled from "styled-components";
export const LinkStyled = styled(Link)`
text-decoration: none;
color: #333;
margin: 0px 15px 0px 15px;
font-weight: 500;
`;
export const LinkWrapper = styled.div`
display: flex;
flex-wrap: wrap;
`;
export const HeaderWrapper = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 30px 0px 30px;
/* flex-wrap: wrap; */
`;
The header use the media queries hook and display/hide the menu button and the header wrapper:
// Toggle state
const [ isVisible, setIsvisible ] = useState(false);
return (
<HeaderWrapper>
<p>Expenses</p>
{isDesktop && <LinkWrapper isMobileVersion={isMobile}>
<LinkStyled to='/'>Home</LinkStyled>
<LinkStyled to='/about'>About</LinkStyled>
<LinkStyled to='/profile'>Profile</LinkStyled>
<LinkStyled to='/signup'>Signup</LinkStyled>
<LinkStyled to='/login'>Login</LinkStyled>
</LinkWrapper>}
{ isMobile && <GiHamburgerMenu size={25} onClick={() => setIsvisible(!isVisible)} /> }
</HeaderWrapper>
)
}
I am new to styled components. How can I toggle the classes or assign a class (created in the styled components file) only when the display is set on mobile?
Thanks
I don't see where exactly you wanna use it, but basically you can use ternary operator.
<LinkWrapper style={{ color: isMobile ? "#333" : "#444" }} />
This code is just an example how to solve your problem
Styled components are not just styles, but whole customized components.
I am using React, Material UI with styled-components.
Could you please help me to adjust that? forwardedAs doesn't work.
CoursesPage.style.js
import styled from 'styled-components';
import { Button as ButtonComponent } from '../../components/Button/Button';
export const Button = styled(ButtonComponent)`
text-decoration: none;
`;
CoursesPage.jsx
import { Link } from 'react-router-dom';
import { Button } from './CoursesPage.style';
<Button
to='/courses/add'
variant='outlined'
size='small'
forwardedAs={Link}
>
Add new course
</Button>
Button.jsx
import { StyledButton } from './Button.style';
export const Button = (props) => (
<StyledButton {...props}>{props.children}</StyledButton>
);
Button.style.jsx
import { styled } from '#mui/material/styles';
import MUIButton from '#mui/material/Button';
export const StyledButton = styled(MUIButton)`
color: #000;
border: 1px solid #474747;
text-transform: initial;
&:hover {
background-color: #d0d0d0;
border: 1px solid #474747;
}
`;
NavStyles.js
import styled from 'styled-components';
export const Nav = styled.navwidth: 100%; ;
export const NavMenuMobile = styled.ul`
height: 80px;
.navbar_list_class {
font-size: 2rem;
background-color: red;
}
${props => props.navbar_list_props && `
font-size: 2rem;
background-color: gray;
`}
`;
Navbar.js
import React from 'react'
import {Nav, NavMenuMobile} from "./NavStyles";
const Navbar = () => {
return (
<Nav>
{/* work no problem */}
<NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>
{/* not work How to use..? */}
<NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
</Nav>
)
}
export default Navbar
<Nav>
<NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>
Try This
Looks like you are setting styles for the children within NavMenuMobile with the class "navbar_list_class".
Should work with &.navbar_list_class
export const NavMenuMobile = styled.ul`
height: 80px;
&.navbar_list_class {
font-size: 2rem;
background-color: red;
}
`;
I am a beginner of React.
I'm practicing using React to pass props from parent to child.
but.I can't pass props.
I just want to pass simple props from parent to child.
My code is here.
https://codesandbox.io/s/props-test-3bgjy?file=/src/Child.js
My code is not showing the error.
But my code doesn't display correctly.
import React, { Component } from "react";
import styled from "styled-components";
import Child from "./Child";
const Button = styled.button`
font-size: 16px;
padding: 16px;
`;
class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
msg: "state(msg)initial",
flg: true
};
this.doAction = this.doAction.bind(this);
}
doAction() {
this.setState((state) => ({
counter: state.counter + 1,
msg: state.counter,
flg: !state.flg
}));
}
render() {
return (
<div>
<Child msg={this.state.message} flag={this.state.flag} />
<Button onClick={this.doAction}>Click</Button>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import styled from "styled-components";
const Message = styled.p`
font-size: 24pt;
color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
&[data-primary="true"] {
font-size: 24pt;
color: white;
background-color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
}
`;
class Child extends Component {
render() {
return (
<div>
<Message data-primary={this.props.flag}>
count: {this.props.msg}
</Message>
</div>
);
}
}
export default Child;
You are have mistake in line <Child msg={this.state.message} flag={this.state.flag} />
Need use state param msg
<Child msg={this.state.msg} flag={this.state.flag} />
https://codesandbox.io/s/props-test-forked-gw69r?file=/src/Parent.js
It looks like you have a typo; change this line:
<Child msg={this.state.message} flag={this.state.flag} />
to
<Child msg={this.state.msg} flag={this.state.flg} />
I want to use "react-tippy" for my project.
How can I override the styles .tippy-tooltip?
Me need to remove padding inside the tooltip.
Here is the Tool tip component I created for my use using react tippy and styled components. You can figure out from there how to customize it to your needs:
Tooltip.js
import React from 'react';
import 'tippy.js/dist/tippy.css';
import { TooltipText, StyledTippy } from './Tooltip.styled';
const Tooltip = ({ moveDown, moveRight, content, ...props }) => (
<StyledTippy
moveDown={moveDown}
moveRight={moveRight}
content={
<TooltipText small bold>
{content}
</TooltipText>
}
placement="bottom"
{...props}
>
{props.children}
</StyledTippy>
);
export default Tooltip;
Tooltip.styled.js
import styled from 'styled-components';
import Tippy from '#tippyjs/react';
export const TooltipText = styled.p`
font-weight: 500;
font-size: 10px;
line-height: 12px;
color: ${({ theme }) => theme.colors.tooltips.simpleText};
`;
export const StyledTippy = styled(Tippy)`
z-index: 5000;
margin-top: ${({ moveDown }) => (moveDown ? `${moveDown}px` : '0')};
margin-left: ${({ moveRight }) => (moveRight ? `${moveRight}px` : '0')};
background: ${({ theme }) => theme.colors.tooltips.simpleBackground};
height: 24px;
width: 110px;
display: flex;
align-items: center;
justify-content: center;
.tippy-arrow {
color: ${({ theme }) => theme.colors.tooltips.simpleBackground};
}
`;