Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    nasreddine skandrani
    @nasreddineskandrani
    it's already inside the props of any child component wrapped with <ThemeProvider>
    I thought the whole point of context API is to don't go with props cascading
    so why i see the theme inside the props... i am going to check the code of the lib :P if no one has the answer!
    thanks in advanced for helping me see the light on this :)
    Shanon Jackson
    @ShanonJackson
    reading now was afk
    nasreddine skandrani
    @nasreddineskandrani
    thanks
    Shanon Jackson
    @ShanonJackson
    you don't need to useContext(SOMETHING) because they do that inside their component
    so you don't need to do it inside yours
    nasreddine skandrani
    @nasreddineskandrani
    they add it via a loop or something to any component it's not costy this story?
    why do i need to add it to all components if only 3 dumbs components are themed and all the rest is not
    i really want to know how they do this. And probably i am missing some knowedgle about react rendering here
    Shanon Jackson
    @ShanonJackson
    to all components? what do you mean
    just wrap ThemeProvider around you're highest level component root
    nasreddine skandrani
    @nasreddineskandrani
    if the <ThemeProvider> wrap a whole page
    let say with one PageAComponent
    inside this you have 30 components
    they are doing something to add the theme props to all 30 components.
    but how about if my theme is only for 3 buttons
    so 3 components of the 30
    Shanon Jackson
    @ShanonJackson
    you can do that but i would advise not doing that
    the theme is designed to be global
    if you don't want 27 components not to be themed just don't use the props.theme inside those styled-components
    nasreddine skandrani
    @nasreddineskandrani
    i saw this
    in the same article
    import { withTheme } from 'styled-components';
    
    class MyComponent extends React.Component {
      render() {
        console.log('Current theme: ', this.props.theme);
        // ...
      }
    }
    
    export default withTheme(MyComponent);
    if i avoid the ThemeProvider and use withTheme inside the dumb component of button
    i just theme this dumb component and 27 others are fine...
    Shanon Jackson
    @ShanonJackson
    like i said Theme is designed to be global you don't want to be a situation where you are conditionally applying it
    nasreddine skandrani
    @nasreddineskandrani
    ok i see thanks for the answer :)
    Riku Tiira
    @rikutiira

    Hey, I have a question related to nested rules and css classes!

    I have something akin to this:

    const checkedStyles = `
      border: none;
    
      .Checkmark {
        display: block;
      }
    `
    
    const StyledCheckBox = styled.div`
      display: inline-flex;
      width: 1.2rem;
      height: 1.2rem;
      border: 1px solid #CCCCCC;
      position: relative;
      align-items: center;
      justify-content: center;
    
      .Checkmark {
        display: none;
        width: 0.9rem;
        height: 0.9rem;
      }
    
      ${props => props.checked && checkedStyles}
    `
    
    const Component = ({ checked }) => (
      <StyledCheckBox checked={checked}>
        <input type="checkbox" />
    
        <div className=“Checkmark">
          <Icon name="checkmark" color="white" />
        </div>
      </StyledCheckBox>
    )

    I opted for creating a single styled component for StyledCheckBox and using nested class. This probably isn’t quite the de facto way to do things, but I find it kinda nice because StyledCheckbox and <div className=“Checkmark”> are sharing logic based on the checked prop and there’s less noise with applying checked styles.

    What I’m interested in is that is there an existing utility to encapsulate Checkmark class so that its class is also generated like anything created with styled? Or is that just something I have to create myself if I want to do things this way?

    Was thinking something along the lines of const className = styled.createClassName(‘className’) and then you could use className variable inside template literal and the component
    nasreddine skandrani
    @nasreddineskandrani
    hi people
    is there any core of styled-components around? :) i have something great to share and opening an issue or a PR directly in the repo will be time consuming (with a baby :P it's kinda any minute count)
    @geelen || @mxstbr || @kitten i saw you have a lot contribute to the project maybe you can help me get an answer about the validity of the feature proposal, please?
    Dan Van Brunt
    @iDVB
    Anyone have prerendering working with CRA and styled-components? I’ve been googling for hours and can’t seem to find a single example. most of it specific to SSR with express. We just want to get rid of the FOUC with our prerendered site using SC.
    Sourabh Verma
    @sourabhv

    Does anyone know why withTheme when used as a decorator (legacy syntax, if that matters) gives the error Expected a constructor in react-native. But the error goes away if I also add redux's connect as decorator too

    @connect(...)
    @withTheme
    export default class ...

    works fine but

    @withTheme
    export default class ...

    fails.

    Dipl.-Ing. (FH) Johannes Neugschwentner
    @joehannes

    hi there! I'm new to styled-components and usually writing class based React. I tried to wrap a class component with a

    styled(myClassComponent).attrs<additionalPropsMetaInterface>(props => ({ myProp: props.myProp }))<additionalPropsMetaInterface`
      background-color: 'red';
    `

    but the styles of the overriding styled-component never show ... ie. background-color isn't red and the styles are nowhere to be found in the actual browser page

    can somebody tell me if there is anything basic I'm missing? is it not possible to style(classComponents) ...?? or is something else wrong?
    Dipl.-Ing. (FH) Johannes Neugschwentner
    @joehannes
    gotcha ... hh, had to pass className from the styledComponent also to the classComponent and insert it in the rendered wrapper/outer html-tag
    kapilpipaliya
    @kapilpipaliya
    Dont use React. i was highly burned by it
    nasreddine skandrani
    @nasreddineskandrani
    styled-components people :) i want to invit you to: www.wearefrontend.com
    join us in our gitter channels to share our passion and catch 'em all with us.
    thanks
    Shay Davidson
    @ShayHDavidson_twitter

    Hey! I'm using the React compound components pattern quite a lot in my lib, and I struggle to find a solution for a problem I have when using styled-components

    // New styled component based on an existing component
    const CustomOption = styled(Option)
    
    // inside ReactElement:
    React.Children.forEach(children, (child: ReactElement) => {
            const isOptionElement = child.props.type == Option
        });

    My problem is that the isOptionElement is false whenever I use CustomOption as a child, because it's not the same type anymore, even though in practice, it's still an Option, just styled differently. Is there a way for me to get all the components a styled-component is using in order to make this check work?

    Corbin Crutchley
    @crutchcorn

    Hey y'all - has there been any status update on this PR?

    styled-components/babel-plugin-polished#8

    The plugin still seems to work fine, but my team is now suggesting we move away from the plugin due to the lack of peer deps (for a higher version of polished

    It would be a shame to migrate away from an official plugin due to a seemingly working PR not being moved in
    Dimitri KOPRIWA
    @kopax
    Hi
    Is there a way to view missing props.theme when using ${(props) => props.theme.my.value.color}
    Dimitri KOPRIWA
    @kopax
    Merry Christmas IRC friends. Lot'S of success and less bugs to all. and sorry for amsg :)!
    Merry Christmas IRC friends. Lot'S of success and less bugs to all. and sorry for amsg :)!
    Dimitri KOPRIWA
    @kopax
    hello
    is styled-components/native used by any react-native UI Kit ?
    Joakim
    @joakimgk
    If <SomeBox>{data.myvalue}</SomeBox> is a styled component, is there any way to style it differently if the data (and/or myvalue) is null?