Style Modal.method() Ant Design with Styled Component - reactjs

I'm trying some way to style the following methods of the Ant Design modal:
Modal.info
Modal.warning
Modal.success
Modal.error
The default component was styled normally with the following property:
const StyledModal = styled(ModalAntd)`
& .ant-btn-default {
background-color: ${props => props.theme.color.neutral[400]};
color: ${props => props.theme.color.neutral[100]};
border: 1px solid ${props => props.theme.color.neutral[400]};
border-radius: 4px;
width: 60px;
height: 40px;
}
& .ant-btn-primary {
background-color: ${props => props.theme.color.brand.primary};
color: ${props => props.theme.color.neutral[100]};
border: 1px solid ${props => props.theme.color.brand.primary};
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
border-radius: 4px;
width: 60px;
height: 40px;
}
& .ant-modal-body {
color: ${props => props.theme.color.neutral[500]};
font-size: 16px;
}
& .ant-modal-title {
font-weight: 600;
color: ${props => props.theme.color.neutral[1000]};
font-size: 20px;
}
& .ant-modal-confirm-info {
background-color: red;
}
`;
and is being returned in the following format:
function AlertModals({ title, visible, onOk, onCancel, children, ...props }) {
return(
<StyledModal {...props} okText="Sim" cancelText="Não" title={title} visible={visible} onOk={onOk} onCancel={onCancel}>
{children}
</StyledModal>
)
};
but the problem is when i am trying to use the methods i need they are not being affected by styling
function Info({title, content}) {
styledInfo.info({
title,
content,
})
};
function Warning({title, content}) {
StyledModal.warning({
title,
content,
})
};
function Success({title, content}) {
StyledModal.success({
title,
content,
})
};
function Error({title, content}) {
StyledModal.error({
title,
content,
})
};
AlertModals.Warning = Warning;
AlertModals.Success = Success;
AlertModals.Error = Error;
AlertModals.Info = Info;
export default AlertModals;
Summing up my question, how can I style methods, since methods are a function and not a component that I can style with styled components

Related

How to inherit styles from another styled component and turning regular component into styled component at the same time?

I am using StyledComponents stying framework and This is my regular react component
const SelectButton = ({className,children, ...rest}) => {
return (
<select className = {className}{...rest}>
{children}
</select>
);
}
I want to turn this component into styled component by calling styled() function and for that purpose I have attached className prop to DOM element of my react component (SelectButton).
export const StyledSelectButton = styled(SelectButton);
But instead of putting the css in this styled component, I want to inherit from different styled component which is StyledButton.js, which has following css properties.
export const StyledButton = styled(Button).attrs(({ type }) => ({
type: type || "button",
}))
display: inline-block;
height: auto;
padding: 0.8rem 2rem;
border: none;
border-radius: 6px;
font-weight: 500;
font-size: 1.6rem;
text-decoration: none;
text-transform: capitalize;
cursor: pointer;
overflow: hidden;
background-color: ${({ primary }) => (primary ? "#646ff0" : "#cccdde")};
color: ${({ primary }) => (primary ? "white" : "#646681")};
.__select {
color: #585858;
font-family: Poppins;
padding: 1rem;
border: none;
background-color: #cccdde;
width: 150px;
cursor: pointer;
};
How can I achieve that?
I have tried doing this way , but I am repeating my code.
export const StyledSelectButton = styled(SelectButton)
display: inline-block;
height: auto;
padding: 0.8rem 2rem;
border: none;
border-radius: 6px;
font-weight: 500;
font-size: 1.6rem;
text-decoration: none;
text-transform: capitalize;
cursor: pointer;
overflow: hidden;
background-color: ${({ primary }) => (primary ? "#646ff0" : "#cccdde")};
color: ${({ primary }) => (primary ? "white" : "#646681")};
&__select {
color: #585858;
font-family: Poppins;
padding: 1rem;
border: none;
background-color: #cccdde;
width: 150px;
cursor: pointer;
}
You can do something like this,
import styled, {css} from "styled-components";
import { StyledButton } from './Button';
const style = css`
color: #585858;
font-family: Poppins;
padding: 1rem;
border: none;
background-color: #cccdde;
width: 150px;
cursor: pointer;
`;
Using function declaration method:
export function StyledSelectButton({ className, children, ...rest }){
return (
<select className={className} {...rest}>
{children}
</select>
);
};
To turn this component into a styled component, pass it to the styled() function.
StyledSelectButton = styled(StyledButton).attrs((props) => ({
as: "select"
}))`
${style}
`;

Renaming button.jsx makes entire react web unable to compile

i've been tasked with renaming a Button.jsx file for my react web app into 'v2_button.jsx' however when I do so it makes the entire web app unable to compile as there are many times where 'Button' is called but not 'v2_button'. My question is how do I make it so that I can update the name of the jsx file and update every instance where the original Button.jsx is called into 'v2_button'?
Button.jsx file:
import styled from 'styled-components';
const Button = styled.Button`
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 300px;
background: ${(props) => {
let bg;
if (props.disabled) {
bg = props.theme.colors.disabled.background;
} else if (props.color === 'secondary') {
bg = props.theme.colors.primary.main;
} else if (props.color === 'danger') {
bg = props.theme.colors.danger.main;
} else {
bg = props.theme.colors.white;
}
return bg;
}};
font-family: ${(props) => props.theme.font.font3.new};
font-size: 18px;
font-weight: ${(props) => props.theme.fontWeight.heavy_900};
letter-spacing: 0.105em;
color: ${(props) => {
let fontColor;
if (props.color === 'secondary') {
fontColor = props.theme.colors.textPrimary.light;
} else {
fontColor = props.theme.colors.textPrimary.purple.dark;
}
return fontColor;
}};
padding: ${(props) => {
let padding;
if (props.size !== 's') {
padding = '0 39px';
}
return padding;
}};
border-radius: 40px;
border: ${(props) =>
props.disabled
? `1px solid ${props.theme.colors.disabled.border}`
: 'none'};
white-space: nowrap;
transition: background ${(props) => props.theme.animations.short} linear;
:hover {
background: ${(props) => {
let bg;
if (props.disabled) {
bg = props.theme.colors.disabled.background;
} else if (props.color === 'secondary') {
bg = props.theme.colors.primary.light;
} else if (props.color === 'danger') {
bg = props.theme.colors.danger.light;
} else {
bg = props.theme.colors.secondary.light;
}
return bg;
}};
cursor: pointer;
}
`;
export default Button;
Example where Button is called:
import styled from 'styled-components';
import Button from "../../Button";
export const Wrapper = styled.div`
display: flex;
flex-direction: column;
`;
export const Container = styled.div`
display: flex;
flex-direction: column;
`;
export const NameContainer = styled.div`
width: 100%;
display: flex;
align-content: space-between;
flex-direction: row;
font-style: normal;
font-weight: ${(props) => props.theme.fontWeight.med_500};
font-size: ${(props) => props.theme.fontSize.med_16};
`;
export const List = styled.div`
display: flex;
`;
export const FieldLabel = styled.label`
height: 36px;
color: ${(props) => props.theme.colors.white};
font-family: ${(props) => props.theme.font.font1.demi};
margin: 0 0 25px 0;
text-align: center;
font-style: normal;
font-weight: ${(props) => props.theme.fontWeight.heavy_800};
font-size: ${(props) => props.theme.fontSize.large_28};
line-height: 50px;
`;
export const Selected = styled.label`
width: 158px;
height: 40px;
margin: 0 10px 20px 10px;
padding-top: 10px;
padding-left: 20px;
font-size: ${(props) => props.theme.fontSize.med_20};
color: ${(props) => props.theme.colors.white};
font-family: ${(props) => props.theme.font.font1};
caret-color: ${(props) => props.theme.colors.textSecondary.main};
:focus {
outline: none;
}
:focus-within {
box-shadow: inset 0px 0px 2px 1px
${(props) => props.theme.colors.textSecondary.main};
}
::placeholder {
color: ${(props) => props.theme.colors.textPrimary.light};
}
background: ${(props) => props.theme.colors.primary.main};
border: ${(props) => props.theme.borders.textSecondary};
border-radius: 4px;
`;
export const AddFieldButton = styled(Button)`
margin: 30px;
font-size: ${(props) => props.theme.fontSize.med_20};
color: ${(props) => props.theme.colors.textSecondary.main};
background: none;
width: 1px;
text-align: center;
`;
Compiling error I receive after changing Button.jsx to v2_button.jsx:
https://imgur.com/a/kC0AdmG
The best thing is to renamed all the imports.
But a 'workaround' to renaming all the imports could be:
Keep the Button.jsx
Instead of exporting the default implementation, import the implementation from v2_button.jsx file and re-export it from the Button.jsx file.
Thus, every import of Button.tsx will actually refer to the implementation of v2_button.tsx file.
Example:
Button_v1.tsx
const Button_v1 = () => (
<>Button v1</>
);
export default Button_v1;
Button_v2.tsx
const Button_v2 = () => (
<>Button v2</>
);
export default Button_v2;
Since all other files reference Button_v1 and you don't want OR can't update the imports, you could do this:
Button_v1.tsx (after)
import Button_v2 from "./Button_v2"; // <-- ADDED THIS
const Button_v1 = () => (
<>Button v1</>
);
// export default Button_v1; // <-- COMMENTED THIS
export default Button_v2; // <-- ADDED THIS

How can I remove or change the color of the ant design table row hover?

I'm working on a project that we are trying to apply a theme switcher, but the table of the ant design have a default hover property that is is preventing us from completing.
I have a table, styled with Styled Components, like this:
export const StyledTable = styled((props: TableProps<IRoute>) => (
<Table {...props} />
))`
th.ant-table-cell,
button,
td {
color: ${(props) => props.theme.colors.text};
background: ${(props) => props.theme.colors.background};
}
span,
svg {
color: ${(props) => props.theme.colors.text};
}
.tag {
background: ${(props) => props.theme.colors.background};
}
td {
border-color: ${(props) => props.theme.colors.strokes};
}
span.ant-tag.ant-tag-green {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.approved};
border: 0;
}
span.ant-tag.ant-tag-red {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.rejected};
border: 0;
}
span.ant-tag.ant-tag-orange {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.pending};
border: 0;
}
span.ant-tag.ant-tag-purple {
border: 2px solid #d3adf7;
font-weight: 600;
}
.routesTable .ant-table .ant-table-tbody .ant-table-cell > tr:hover > td {
background: unset;
}
`;
The styling for this table looks like this:
export const StyledTable = styled((props: TableProps<IRoute>) => (
<Table {...props} />
))`
th.ant-table-cell,
button,
td {
color: ${(props) => props.theme.colors.text};
background: ${(props) => props.theme.colors.background};
}
span,
svg {
color: ${(props) => props.theme.colors.text};
}
.tag {
background: ${(props) => props.theme.colors.background};
}
td {
border-color: ${(props) => props.theme.colors.strokes};
}
span.ant-tag.ant-tag-green {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.approved};
border: 0;
}
span.ant-tag.ant-tag-red {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.rejected};
border: 0;
}
span.ant-tag.ant-tag-orange {
color: ${(props) => props.theme.colors.text2};
background: ${(props) => props.theme.colors.pending};
border: 0;
}
span.ant-tag.ant-tag-purple {
border: 2px solid #d3adf7;
font-weight: 600;
}
.routesTable .ant-table .ant-table-tbody .ant-table-cell > tr:hover > td {
background: unset;
}
`;
But it is now working.
I saw in research that other people had the same problem and none managed to solve it. Does anyone know if it is possible to cancel or change the hover color of an ant design table?

How to interpolate a CSS property in styled-components?

I am trying to create a Styled Component which can receive a prop for the type of border. The Section can either have border-top or border-bottom based on the prop passed to it.
Here is the code
type TSectionBorder = 'top' | 'bottom';
<Section edge="top">
{children}
</Section>
How can I achieve this in styled components, something along these lines -
const Section = styled.section<{edge: TSectionBorder}>`
border-${edge}: 1px solid black;
`;
const Section = styled.section<{edge: TSectionBorder}>`
${({ edge }) => `border-${edge}: 1px solid black`};
`;
I deconstructed the props just to keep your syntax, however, this is one way to do so. They also have a css helper to look into.
Documentation:
https://styled-components.com/docs/basics#passed-props
https://styled-components.com/docs/api#css
First you will import:
import styled from 'styled-components';
Here is the function ButtonBlock:
function ButtonBlock(props) {
return (
<BtnBlock type="primary" {...props}>
{props.children}
</BtnBlock>
);
}
const handleColorType = (color) => {
switch (color) {
case 'grey':
return '#D4D5D6';
default:
return '#6633CC';
}
};
const hoverColorType = (color) => {
switch (color) {
case 'grey':
return '#6a7581';
default:
return '#99CC00';
}
};
Styled Component:
const BtnBlock = styled(Button)`
&& {
max-width: none;
width: 100%;
text-align: center;
display: block;
font-size: 14px;
font-weight: 600;
line-height: 50px;
height: 50px;
text-transform: uppercase;
border-radius: 0;
border: 0px;
padding: 0;
background: ${({ color }) => handleColorType(color)};
&[disabled] {
background-color: #c6c6c6;
}
:hover {
background-color: ${({ color }) => hoverColorType(color)};
}
&[disabled]:hover {
background-color: #c6c6c6;
}
}
`;

The clientWidth property of ref button return undefined

Using the targetButton refs to get the Button dom, and I want to get clientWidth property when click this Button.
import React from "react";
import styled from "styled-components";
const Container = styled.div`
width: 600px;
height: 600px;
background-color: black;
`;
const Button = styled.button`
font-size: 24px;
padding: 1em 2em;
margin: 3px;
border: 0;
outline: 0;
color: white;
background-color: #2196f3;
border-radius: 0.15em;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
`;
const Ripple = styled.div.attrs({
size: props => props.size
})`
width: ${props => props.size};
height: ${props => props.size};
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
`;
class RippleButton extends React.Component {
state = {
rippleNum: 0
};
addRipple() {
const { clientWidth, clientHeight } = this.targetButton;
console.log(clientWidth);
this.setState({
rippleNum: this.state.rippleNum + 1
});
}
render() {
const children = [];
for (let i = 0; i < this.state.rippleNum; i += 1)
children.push(
<Ripple
size={Math.max(
this.targetButton.clientWidth,
this.targetButton.clientHeight
)}
key={i}
/>
);
return (
<Container>
<Button
ref={elem => {
this.targetButton = elem;
}}
onClick={this.addRipple.bind(this)}
>
Button{children}
</Button>
</Container>
);
}
}
export default RippleButton;
The console reports undefined error message, after having search many ways to tweak it.
The problem in this code is when using styled-components, you should use innerRef instead of ref.

Resources