styled-components

How to add a ClassName and remove it onScroll event in React.JS?

由 混江龙づ霸主 提交于 2019-12-24 05:01:12
问题 I'm trying to make a Sticky Header that can change its background-color based on his position on the page. To do that, I'm trying to add a className "active" to my Styled Component "StyledHeader" that will appears when the scrollPositionY is above 400px and disappear when below. In other words, what I want to do is something like this but using React.JS, JSX syntax and Styled Components. Here's what I have for now: import { Link } from '@reach/router'; import DuskLogo from '../images/dusk

Why this wrapped styled-component errors “has no properties in common with”

由 我只是一个虾纸丫 提交于 2019-12-24 04:26:06
问题 In the code below Typescript gives an error on <HeaderInner> : [ts] Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick & Partial>, "className"> & ... import * as React from 'react' import styled from 'styled-components' interface ContainerProps { className?: string } const Container: React.SFC<ContainerProps> = ({ children, className }) => <div className={className}>{children}</div> const HeaderInner = styled(Container)` display: flex; flex

Moving global style sheets above styled-components in <head>

由 こ雲淡風輕ζ 提交于 2019-12-23 22:14:32
问题 I am currently import ing CSS files in one of my components. Those style sheets are added as link tags in <head> , and will be globally available: import './src/styles/normalize.module.css'; I am also using styled-components . Currently, the link tags generated by the global CSS import s land below the styled-component style tags, in <head> : I would like the styled-components to be more specific, i.e. appear above the link tags from the CSS import s. Is there any way to accomplish that? PS:

Defining a function inside a template literal

由 蓝咒 提交于 2019-12-23 18:28:38
问题 I'm using styled-components as a solution to styling for React. They've got a nice approach that uses template literals to interpolate CSS. The template literals are passed the component's props so that you can do things like: const PasswordsMatchMessage = styled.div` background: ${props => props.isMatching ? 'green' : 'red'}; ` The result is a component that renders a div tag with either a green or red background depending on the value of isMatching . The above would be used via JSX like

How to correctly define a reference (React.RefObject) for styled-components (for TypeScript)?

由 ≡放荡痞女 提交于 2019-12-23 17:30:35
问题 How to correctly define a reference for styled-components? I wrote the following test code: import React, {Component, RefObject, ReactNode} from 'react'; import styled from 'styled-components'; const ModalShadowContainer = styled.div` background-color: black; `; export default class Modal extends Component { private modalRef: RefObject<HTMLDivElement>; constructor(props: {}) { super(props); this.modalRef = React.createRef<HTMLDivElement>(); } public render(): ReactNode { return (

Styled Components: props for hover

由 时光怂恿深爱的人放手 提交于 2019-12-23 10:06:20
问题 I want to apply a &:hover only when a prop is passed - in this situacion: animated const AnimationContainer = styled.div` transform: translate(0%); transition: 0.3s ease-out; &:hover { // apply hover only when $(props.animated) is paased position: fixed; transform: translate(0%, -30%); transition: 0.3s ease-out; } `; Does anyone have a suggestion how to do it? I guess it would be possible to apply the styling for every property just starting with .. :$(props => props.animated ? ..) , but is

How to use React DnD with styled component?

由 你说的曾经没有我的故事 提交于 2019-12-23 03:15:49
问题 When wrapping my styled component in connectDragSource I get the following error: Uncaught Error: Only native element nodes can now be passed to React DnD connectors.You can either wrap PaneItemText__StyledItem into a <div> , or turn it into a drag source or a drop target itself. The first suggestion from this message is to wrap my styled component in a <div> , but this will mess with my layout and would prefer not to do this. I'm not sure what the second option is suggesting - would anybody

How to fix 'Static HTML elements with event handlers require a role.'?

由 笑着哭i 提交于 2019-12-22 05:35:34
问题 My reactjs styledcomponent contains this code: <a styling="link" onClick={() => this.gotoLink()}> <SomeComponent /> </a> This works fine but the eslint is complaining: Static HTML elements with event handlers require a role. How can I fix this error? 回答1: you need to add a role props in your a tag to avoid this warning, for example a button <a role = "button" styling="link" onClick={() => this.gotoLink()}> <SomeComponent /> </a> I guess it is because the HREF props is missing in your anchor

You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react

由 折月煮酒 提交于 2019-12-21 06:47:06
问题 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

Styled Component styles are disabled in Chrome DevTools

由 本秂侑毒 提交于 2019-12-21 03:25:11
问题 I am working on a static page that uses React, Gatsby, and styled-components. When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code. When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {} , but that can be a pain,
订阅 styled-components