These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string. The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of … Read more
I recommend you to not to use svg files directly, but use Playground SVG (https://react-svgr.com/playground/), convert the file to JS and then you can change the color and other stuff by props.
From the docs: The styled method works perfectly on all of your own or any third-party components as well, as long as they pass the className prop to their rendered sub-components, which should pass it too, and so on. Ultimately, the className must be passed down the line to an actual DOM node for the … Read more
You should import images in the following manner (assuming that you have webpack configured for importing media assets). import myImage from ‘../../assets/image.png’; /* … */ const HeaderImage = styled.div` background-image: url(${myImage}); `;
A very short answer (there is much more to it in general) CSS Template strings SC parses template strings with CSS for at runtime. Emotion has a babel plugin to prepare those parsed things in a format that can render final CSS at runtime faster. JSS currently only supports basic template strings and otherwise uses … Read more
You can make moveVertically a function. Please consider code below: const moveVertically = (y) => keyframes` 0% { transform : translateY(0px) } 100% { transform : translateY(${y}px) } `; const BallAnimation = styled.g` animation : ${props => moveVertically(props.y)} ${props => props.time}s linear `; Here you have y in props of BallAnimation. So you can extract … Read more
That’s exactly why we created our Babel plugin, when using it you’ll get class names that include the name you gave your component: <div class=”Sidebar__Button-KSdffgy oPwefl”> On top of that we set the displayName of the generated component too, which means in your React DevTools you’ll see the actual component name rather than just <div> … Read more
Give this a try _document.js import React from ‘react’; import Document, { Head, Main, NextScript } from ‘next/document’; import { ServerStyleSheet } from ‘styled-components’ import { ServerStyleSheets } from ‘@material-ui/styles’; import theme from ‘../src/theme’; class MyDocument extends Document { static async getInitialProps (ctx) { const styledComponentsSheet = new ServerStyleSheet() const materialSheets = new ServerStyleSheets() const … Read more
I eventually figured this out, so here’s how you can do it, at least if using React. You need to define the variables in one file and export them. // Variables.js export const FONTSIZE_5 = ’20px’; Then you need to import those variables into each component file. // Button.js import * as palette from ‘./Variables.js’; … Read more
I think you’re probably seeing the styles injected via “speedy mode” in production. This uses a special DOM API that Chrome DevTools currently only shows in a read-only capacity. We haven’t put in an escape hatch to disable this injection method yet, but it’s being considered. When running your setup in development mode everything should … Read more