i am using gatsby-plugin-styled-components to style the elements below.
import React from 'react';
import styled from 'styled-components';
const secondChar = styled.span`
font-size: 3em;
color: azure;
`
const TitleWrapper = styled.div`
font-size: 3.5em;
font-weight: 100;
letter-spacing: 0.01em;
font-family: 'Covered By Your Grace', cursive;
`
const Title = () => (
<TitleWrapper>
<span>a</span>
<secondChar>b</secondChar>
<span>c</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
</TitleWrapper>
)
export default Title;
For some reason i simply cant figure out myself, i am unable to style the secondChar component. Color and font size doesn't change at all.
However, i am able to style the secondChar via Chrome Dev Tool.
Anyone can advise what is going on?
Thank you.
updates:
Solved the first issue above. Forgot to use camelcase for components.
now i am trying to implement the following
Styled-components: refering to other components
const SecondChar = styled.span`
display: inline-block;
transform: translateX(20px);
transition: transform 500ms ease-in-out;
${TitleWrapper}:hover & {
color: azure;
}
`
const TitleWrapper = styled.div`
font-size: 3.5em;
font-weight: 100;
letter-spacing: 0.01em;
font-family: 'Covered By Your Grace', cursive;
`
const Title = () => (
<TitleWrapper>
<span>a</span>
<SecondChar>b</SecondChar>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
</TitleWrapper>
)
however hovering over TitleWrapper doesn't have any response on the SecondChar component. am i doing something wrong again?
All component naming should start by capital letter, including styled components, so the secondChar should be SecondChar
Related
I'm new to React, but following multiple guides I have an issue with buttons not selecting the correct style based on "checkButtonStyle", only rendering with the fallback options.
My code is:
(Button.jsx)
import React from 'react';
import './Button.css';
const STYLES = ['btn--primary', 'btn--light', 'btn--dark', 'btn--outline', 'btn--outline--light', 'btn--outline--dark'];
const SIZES = ['btn--medium', 'btn--large'];
export const Button = ({children, type, onClick, buttonStyle, buttonSize}) => {
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<button className={'btn ${checkButtonStyle} ${checkButtonSize}'} onClick={onClick} type={type}>
{children}
</button>
)
};
(Button.css)
:root {
--primary: #EF1B71;
--light: #FFFFFF;
}
.btn {
font-family: 'Lato', sans-serif;
font-weight: 400;
border-radius: 4px;
cursor: pointer;
transition: 500ms ease;
}
.btn--primary {
background-color: var(--primary);
color: var(--light);
border: 1px solid var(--primary);
}
.btn--medium {
padding: 8px 20px;
}
(HeroSection)
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
function HeroSection() {
return (
<div className='hero-container'>
<video src='/videos/home-hero-video-2.mp4' autoPlay loop muted />
<div className="hero-btns">
<Button type='button' buttonStyle='btn--primary' buttonSize="btn--medium">Enquire</Button>
</div>
</div>
)
}
I have tried everything I can think of, with no errors showing in console for the button, however the only result I am getting is the .btn style within Button.css and not the btn--primary or btn--medium styles.
Thank you
className={
checkButtonSizes + " " + checkButtonStyle + " btn"}
You have to pass the variables in the format mentioned above to make it work. It works for me. Please try and let me know.
In JavaScript, it's possible to use variables in strings with a JavaScript template literal.
However, this requires the use of backticks (`) rather than single (') or double (") quotes.
This line uses single quotes rather than backticks. Thus, ${checkButtonStyle} and ${checkButtonSize} will be rendered as strings and not their assigned values.
<button className={'btn ${checkButtonStyle} ${checkButtonSize}'} onClick={onClick} type={type}>
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
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>
)
I am trying to change the color and the size of the DropdownMenu using the styled-components like the code below:
const DropdownCustom = styled.DropdownMenu`
font-family: sans-serif;
font-size: 1.3rem;
border: none;
border-radius: 5px;
background-color: red;
`;
Then I try to use it like this:
<Dropdown>
<button onClick={() => setState(!state)}>Create</button>
<DropdownCustom hidden={!state}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownCustom>
</Dropdown>
But it gives me an error saying that _styledComponents.default.DropdownMenu is not a function.
I am very new to styling with css and it is very confusing, so any advice or guide would be really appreciated! :)
Edited
import {
Dropdown,
DropdownItem,
DropdownMenu
} from "styled-dropdown-component";
If you trying to style a custom component you need to use styled as a function:
const DropdownCustom = styled(DropdownMenu)`
font-family: ...
`;
It will work only if the custom component uses the className props.
Therefore, you sometimes want to style custom component's parent, and target the styling with selectors - as it's just a CSS:
const Wrapper = styled.div`
font-family: ...;
.dropDown {
....;
}
`;
<Wrapper>
<Dropdown />
</Wrapper>
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).