GatsbyJS export styled components - css

I have created a elementStyles.js file where I am storing some styled-components to later use within my GatsbyJS site: import { Wrapper, PageContent } from "../components/StyledElements/elementStyles"
However, for some reason it keeps giving me error:
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
My styled components .js file:
import styled from "styled-components"
export const Wrapper = styled.div`
margin: 0 auto;
max-width: 1920px;
padding: 0;
`
export const PageContent = styled.div`
background-color: #455260;
height: 100%;
padding: 50px 90px;
color: #eff1ef;
font-weight: 300;
`
If I remove PageContent and write export default Wrapper at the end it works without problems.
Therefore I've tried to export with different methods:
export default { Wrapper, PageContent }
Any clues on what I might be missing?

Related

With styled components how to bring in an external CSS file for createGlobalStyle?

I have a css file and I'm trying to figure out how to bring in and per memory I thought I read this in the docs but I'm getting an error. Given the scrollbar file of:
import styled from 'styled-components'
export const Scrollbar = styled.css`
html {
--scrollbarBG: ${({ theme }) => theme.colors.color01};
--thumbBG: ${({ theme }) => theme.colors.color04};
}
body::-webkit-scrollbar {
width: 16px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG);
border-radius: 8px;
border: 4px solid var(--scrollbarBG);
}
`
My error is:
WebpackError: TypeError: Cannot read property 'withConfig' of
undefined
In my theme directory is my GlobalStyles.js:
import { createGlobalStyle } from 'styled-components'
// CSS
import Scrollbar from './Scrollbar'
const GlobalStyles = createGlobalStyle`
${Scrollbar}
`
export default GlobalStyles
When I search the docs I'm not seeing it in advanced. Searching the site I've read:
Import CSS File to Styled Component
How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS
loading external css file just for one react component
React + Styled Components: Am I supposed to avoid CSS files altogether?
In styled components what is the correct way to bring in the css file to createGlobalStyle?

How can I style the LoadMoreButton component, getstream's react-activity-feed?

I am using getstream's react-activity-feed, react components to create activity and notification feeds using Stream. I would like to style the LoadMoreButton component, which is passed as the default prop for the LoadMorePaginator component.
What is the recommended approach to styling the LoadMoreButton component?
You can import an .scss file into your component to override default getstream component styles, for example:
.raf-load-more-button {
padding: 0 8px;
button {
margin: {
right: 0;
left: 0;
}
}
}
https://github.com/GetStream/stream-chat-react#customizing-styles

background image in styled components react

Good evening.
I am facing an issue while using react in combination with styled components.
I have an image folder located in :
And I have my styled components in the following folder :
Inside the styled components I'm trying to import the image like this :
const FormImage = styled.div`
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: -20%;
background-image: url(../../img/testlogo.png);
`;
Im sure this is the right path. But somehow the image is not showing in the browser.
This is what i'm seeing in my browser :
Such path is not available in runtime (as CSS-in-JS like styled-component creates the CSS in runtime, although there are solutions with no-runtime), you should try one of the next approaches:
import ImgSrc from '../../img/testlogo.png';
const FormImage = styled.div`
background-image: url(${ImgSrc});
`;
// or
const FormImage = styled.div`
background-image: url(${require(`../../img/testlogo.png`)});
`;

styled-components local variable

Coming from SCSS (SASS)
What would be the appropriate Styled-Components implementation of the below SCSS code?
SCSS:
.circle{
$size: 16px; // <-- SCSS FTW. use such a trick in styled-components
height: $size;
width: $size;
.. rest of properties...
}
Currently the styled-component (Circle) looks like this:
...lots of other styled exports
export const Circle = styled.div`
height: 16px;
width: 16px;
background: red;
border-radius: 50%;
`
...lots of other styled exports
Problem is, I want to keep that "meaningless" size variable in the same context where it's consumed (just like in SCSS) because nothing else cares or will ever care about it. I don't think dumping a variable somewhere and then using it with '${size}' is a "clean" way. such tactics are petty and promote messy code-base.
I have devised a neat trick to encapsulate variables only for a specific scope:
styled.h1(({size='4em', color='lime'}) => `
font-size: ${size};
color: ${color};
text-align: center;
`)
I've written a Medium post in the past which breaks down the explenation of this method
One way to solve this problem is to create a separate file with all the variables that you want to use later in your style files:
export const Variables = {
size: '16px',
bgColor: 'red',
}
then you can import it:
import { Variables } from './Variables'
export const Circle = styled.div`
height: ${Variables.size};
width: ${Variables.size};
background: ${Variables.bgColor};
border-radius: 50%;
`
You can use classic css properties (with IE11 polyfill in mind) like this:
--radioWidth: 42px;
.MuiRadio-root {
width: var(--radioWidth);
}
.conditionCollapse {
padding-left: var(--radioWidth);
}

React Styled Component space between components

I have several styled components in a row with a image.
I just need to add a space between HeaderLinks.
I've tried following way but it doesn't work.
const HeaderLink = styled.a`
color: #000;
font-size: 1.5em;
`;
const Wrapper = styled.div`
HeaderLink + HeaderLink {
margin-left: 1em;
}
`;
HeaderLink1|HeaderLink2|Image|HeaderLink3|HeaderLink4
So I want to add margin between HeaderLink1&HeaderLink2 and HeaderLink3&HeaderLink4.
How can I use styled component in styled css?
Just used ${HeaderLink} instead of HeaderLink.

Resources