styled-components

In GraphQL you can write something like this to define a query: const USER_QUERY = gql` { user(id: 2) { name } } ` In styled components you can define a styled component like this: const Button = styled.button` background-color: papayawhip; ` What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated. 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 ${}

I'm trying to build my first portfolio website and got stuck in routing using react-router-dom 4.2.2 and styled-components 2.2.3. error message: You should not use Route or withRouter() outside a Router I also try using Link instead of NavLink but got error too( You should not use Link outside a Router ) Someone help me please. navigationBar.js import React, { Component } from 'react'; import { NavigationContainer, NavItem } from './navigationBar.style'; class NavigationBar extends Component { render() { return ( <NavigationContainer> <NavItem to="/">Home</NavItem> <NavItem to="/projects"

How to correctly define a reference for styled-components? I wrote the following test code. This is a refined code, unlike the previous one ( How to correctly define a reference (React.RefObject) for styled-components (for TypeScript)? ). Added reference type StyledComponentClass< {}, any> . import React, {Component, RefObject, ReactNode} from 'react'; import styled, {StyledComponentClass} from 'styled-components'; type TModalShadowContainer = StyledComponentClass<{}, any>; const ModalShadowContainer: TModalShadowContainer = styled.div` background-color: black; `; export default class Modal

Using typescript and want to set styling for Material UI component with styled-components. But type error happens with StyledComponent showing Type '{ children: string; }' is missing the following properties import React, { PureComponent } from 'react'; import styled from 'styled-components'; // ^4.1.3 import { Button } from '@material-ui/core'; // ^3.9.1 class TestForm extends PureComponent { render() { return ( <> <Button style={{ backgroundColor: 'red' }}>Work</Button>{/* OK */} <StyledButton>Doesn't work</StyledButton>{/* Type Error happens here <=============== */} {/** Type '{ children:

I know how to get the theme from components that are created using the styled way: const StyledView = styled.View` color: ${({ theme }) => theme.color}; `; But how to get from normal components or apply it for different properties ? Example: index.js <ThemeProvider theme={{ color: 'red' }}> <Main /> </ThemeProvider> main.js <View> <Card aCustomColorProperty={GET COLOR FROM THEME HERE} /> </View> Notice how the property that needs the theme is not called style EDIT: As of v1.2, my pull request got merged and you can use the withTheme higher order component this way: import { withTheme } from

I'm building a bundle with rollUp using styled-components. My rollup.config.js looks like: import resolve from 'rollup-plugin-node-resolve' import babel from 'rollup-plugin-babel' import commonjs from 'rollup-plugin-commonjs' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'cjs' }, external: [ 'react', 'react-proptypes' ], plugins: [ resolve({ extensions: [ '.js', '.json', '.jsx' ] }), commonjs({ include: 'node_modules/**' }), babel({ exclude: 'node_modules/**' }) ] } And I'm receiving [!] Error: 'isValidElementType' is not exported by node_modules/react-is

I am using styled-components and am trying to set a background image like so const HeaderImage= styled.div` background-image: url('../../assets/image.png'); '; I've also tried without the quotes, like so const HeaderImage= styled.div` background-image: url(../../assets/image.png); '; In both cases, I get the same result http://localhost:3000/assets/image.png Failed to load resource: the server responded with a status of 404 (Not Found) I am using Richard Kall's react starter The file is definitely in the specified location. Am I loading it incorrectly? I should mention, I'm very new to this

How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? In css I would do it similarly to this: <button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button> In styled components if I try to use '&&' in the classname it doesn't like it. import React from 'react' import styled from 'styled-components' const Tab = styled.button` width: 100%; outline: 0; border: 0; height: 100%; justify-content: center; align-items: center; line-height: 0.2; ` export default