I would like to pass style to two styled component using emotion.
I've tried like this, but ${commonStyle} doesn't inherit to styled.a and styled.span:
const commonStyle = css`
color: #000;
font-size: 1.6rem;
`;
const commonLink = styled.a`
${commonStyle}
`;
const whiteLink = styled.span`
${commonStyle}
color: #fff;
`;
How can I extend css using emotion?
I have came across a solution. Instead of inheriting commonStyle as the first property in commonLink and whiteLink, inherit it as the last property of the both commonLink and whiteLink.
Look at the code below, I am inheriting commonStyle styles into Child component and its working fine.
import styled from '#emotion/styled'
import {css} from '#emotion/css'
const commonStyle = css`
color: purple;
`
const Child = styled.div`
font-size: 1.6rem;
${commonStyle}
`
const Parent = styled.div`
${Child} {
color: green;
}
`
render(
<div>
<Parent>
<Child>Green</Child>
</Parent>
<Child>Purple</Child>
</div>
)
Related
How to style a styled component based on the class name it has. I found the following implementation through some blogs, but this isn't working. Can someone help me with this? I really appreciate any help you can provide.
import React from "react";
import { TiStarFullOutline } from "react-icons/ti";
import styled from "styled-components";
function StarRating() {
return (
<Star className="filled">
<TiStarFullOutline></TiStarFullOutline>
</Star>
);
}
export default StarRating;
//notworking
const Star = styled.div`
font-size: 2rem;
& .filled {
color: red;
}
`;
//working
const Star = styled.div`
color:red;
`
;
When accessing a child or a selector, you don'thave to use space. Below is an example:
const Star = styled.div`
font-size: 2rem;
&.filled {
color: red;
}
`;
Styled Components Documentation
Here is my simple styled button
import styled from 'styled-components';
import Button from '#material-ui/core/Button';
import ArrowForwardIosIcon from '#material-ui/icons/ArrowForwardIos';
const MyButton = styled(Button)`
font-size: 11px;
`;
<MyButton
variant="outlined"
color="primary"
size="small"
disableElevation
endIcon={<ArrowForwardIosIcon />}
>
CLICK ME
</MyButton>
So how do I change endIcon size. I can change it in Chrome dev tool but have no idea what to add to MyButton definition. Assume it should be something like this in styled button definition:
&.MuiButtonendIcon {
color: green;
font-size: 15px;
}
you can style the individual endIcon by targeting the svg element and setting its font-size property like this
const MyButton = styled(Button)`
& .MuiButton-endIcon svg {
font-size: 50px;
color: green;
}
`;
I solved it this way:
const MyButton = styled(Button)`
*:first-of-type svg{
font-size: 50px;
color: green;
}
`;
I'm using styled-system with styled components and have a basic case like this:
const buttonFont = {
fontFamily: "Chilanka"
};
// style a boilerplate for text
const Text = styled.div`
${typography}
${color}
`;
// button blueprint
const Button = ({ children, ...rest }) => {
return (
<Text as="button" {...buttonFont } {...rest}>
{children}
</Text>
);
};
// styled button using button
const StyledButton = styled(Button)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
// When using "as" this component does not includes buttonFont styles
const StyledLabel = styled(StyledButton).attrs({
as: "label"
})``;
I want to create a StyledLabel which will inherit all styles from StyledButton, but change tag to label. But StyledLabel does not get the buttonFont styles when using "as" attribute.
Please see live example here: demo
I'm not sure what your end goal is, but these 2 examples worked in terms of inheritance. However, they might not help with your plan for composition:
import React from "react";
import styled, {css} from "styled-components";
import { typography, color } from "styled-system";
import ReactDOM from "react-dom";
import "./styles.css";
const buttonFont = {
fontFamily: "Chilanka"
};
const Text = styled.div`
${typography}
${color}
margin: 24px;
`;
const StyledButton = styled(Text)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
const StyledLabel = styled(StyledButton)`
color: yellow;
`;
const __Text = styled.div`
${typography(buttonFont)}
${color}
margin: 24px;
`;
const __StyledButton = styled(__Text)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
const __StyledLabel = styled(__StyledButton)`
color: yellow;
`;
function App() {
return (
<div className="App">
<StyledButton as="button" {...buttonFont}>styled button</StyledButton>
<StyledLabel as="label" {...buttonFont}>Does inherit styled font with "as"</StyledLabel>
<br />
<br />
<br />
<__StyledButton as="button">styled button</__StyledButton>
<__StyledLabel as="label">Does inherit styled font with "as"</__StyledLabel>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I would like to apply exactly the same styles to a styled input element and a styled select element.
Currently, I'm using string interpolation to do this:
const styles = `
background-color: white;
width: 100%;
border: 0 solid transparent;
border-radius: 10px;
margin-bottom: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.2rem;
`
const Select = styled.select`${styles}`
const Input = styled.input`${styles}`
Is there a better way of doing this which doesn't involve using a 'raw' string? The disadvantage of using the raw styles string is that Visual Studio Code doesn't syntax-highlight it:
You have few options here:
css helper function:
const styles = css`
background-color: white;
// ...
`;
const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;
"as" polymorphic prop (added in v4):
<Select as="input">
...
</Select>
withComponent method (candidate for deprecation):
const Select = styled.select`
background-color: white;
// ...
`;
const Input = Select.withComponent('input');
You can use the css tagged template literal:
import styled, { css } from "styled-components";
const styles = css`
background-color: white;
width: 100%;
`;
const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;
That should get properly syntax highlighted (haven't tested).
Is it possible to inject a global CSS class into a styled-component?
Similar to extending in LESS using &:extend or #extend in SASS.
This code doesnt apply the globalCSS styles:
const extendedComponent = styled.div`
&:extend(.globalClass) // I want this component to inherit all styles of .globalaCSS
.otherStyles {
...
}
`
The globalClass does exits and even applies styles when used inline:
extendedComponent(className="globalCSS)
you can just add the "class name" to your element,
but if you really want to inherit or extend.
Use their example as reference:
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// We're extending Button with some extra styles
const TomatoButton = Button.extend`
color: tomato;
border-color: tomato;
`;
docs link:
https://www.styled-components.com/docs/basics#extending-styles
Use attrs: https://styled-components.com/docs/api#attrs
const extendedComponent = styled.div.attrs({
className: 'globalCssClassThatIWantToExtend'
})`
.otherStyles {
/*...*/
}
`;
The attrs function can also accept a props function:
.attrs(props => ({
/*...*/
}))