We Keep Coding

Material UI with styled-components - forwardedAs doesn't work

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;
}
`;

Generic styled component Icon

I am styling my react component with styled-components. I want an icon component that can be used in different places just by changing size, colour props etc. I also want to pass icons names as props for different places. I am succeeded to change the size and colour but don't know how to pass the icon name as per requirement.
Here is my generic icon component:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie } from 'react-icons/fa';
const StyledSVGIcon = styled(FaUserTie)`
svg {
fill: black;
${({ size }) =>
size &&
css`
width: ${size};
height: ${size};
`}
${({ transform }) =>
transform &&
css`
transform: ${transform};
`}
path {
${({ color }) =>
color &&
css`
fill: ${color};
`}
}
}
`;
const GenIcon = props => {
return (
<StyledSVGIcon
src={`/icons/${props.name}.svg`}
color={props.color}
size={props.size}
transform={props.transform}
/>
);
};
export default GenIcon;
And I want to use it like this:
<GenIcon
name="FaUserNurse"
color="red"
size="16px"
/>
But the GenIcon component is not working. please help me where I am doing wrong. the icon could be any kind like svg or any other react icon library.

Try this out, you're close:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie, FaDocker } from "react-icons/fa";
const IconStyler = styled.span`
color: ${(props) => props.color};
& svg {
${(props) =>
props.small &&
css`
width: 14px !important;
height: 14px !important;
`}
${(props) =>
props.med &&
css`
width: 20px !important;
height: 20px !important;
`}
${(props) =>
props.large &&
css`
width: 28px !important;
height: 28px !important;
`}
}
`;
const Icon = ({ children, ...props }) => {
return <IconStyler {...props}>{children}</IconStyler>;
};
const GenIcon = () => {
return (
<div>
<h5>Any Icon</h5>
<div>
<Icon color="blue" small>
<FaUserTie />
</Icon>
</div>
<div>
<Icon color="orange" large>
<FaDocker />
</Icon>
</div>
</div>
);
};
export default GenIcon;
Here's a sandbox link: https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js

How to redefine a style .tippy-tooltip in "react-tippy"

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};
}
`;

Add styles to Styled Component custom Component in React Native

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} />

React.js child component not updating styling derived from props, why? (styled-components)

I am new to react.js and I am trying to get my head around conditional styling depending on props passed down from parent components.
I'm trying to make a button that has styling differences depending on whether the 'disabled' prop is true or false. If the button is disabled (true) it should appear grey, otherwise, it's blue.
This is the code I have so far, although it is not working and I'm not sure why.
Parent component
import React from 'react';
import { storiesOf } from '#storybook/react';
import { action } from '#storybook/addon-actions';
import { linkTo } from '#storybook/addon-links';
import { Welcome } from '#storybook/react/demo';
// Buttons
import Primary from '../components/ButtonPrimary'
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Buttons')
.add('Primary', () => <Primary label="Default" disabled="false"></Primary>)
Child component
import React from "react";
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.disabled ? '#EDEDED' : '#0076C0'};
border: ${props => props.disabled ? '1px solid #DADADA' : 'none'};
color: ${props => props.disabled ? '#818181' : '#FFFFFF'};
cursor: ${props => props.disabled ? 'unset' : 'pointer'};
border-radius: 2px;
font-family: Roboto-Regular;
font-size: 16px;
padding: 6px 32px;
font-family: roboto, helvetica, sans-serif;
font-size: 18px;
&:focus {
outline: none;
}
&:hover {
box-shadow: ${props => props.disabled ? 'unset' : '0px 1px 2px 1px #b3b3b3'};
}
&:active {
box-shadow: ${props => props.disabled ? 'unset' : 'inset 0 0 10px #2f2f2f80'};
}
`;
export default class ButtonPrimary extends React.Component {
render() {
return (
<div>
<Button disabled={this.props.disabled}>{this.props.label}</Button>
</div>
)
}
}
Does anyone have any idea why?

In your parent component, you need to change disabled to be a boolean instead of a string.
storiesOf('Buttons')
.add('Primary', () => <Primary label="Default" disabled={false} ></Primary>)
Or in case if you need to use it as a string you need to specify your conditional
${props => props.disabled === 'true' ? '#EDEDED' : '#0076C0'};