1

Everything is working except this piece which I have tried many different ways...

    const HiddenInput = styled.input`
    display: none;
    &:checked + CheckboxLabel: {
        background-color: #866dce;
    },
`

The checked should change color but it doesn't. I also tried using .checkbox-label where classname='checkbox-label" but no luck

Here is the relevant code...

const CheckboxLabel = styled.label`
    background-color: rgb(211, 106, 106);
    cursor: pointer;
    font-size: 20;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-right: 10px;
    padding: 5px;
    border-radius: 5px;
`
const HiddenInput = styled.input`
    display: none;
    &:checked + .checkbox-label: {
        background-color: #866dce;
    }
`

<HiddenInput type="checkbox" id={"toggle"+index} onChange={() => handleChecked(item)} key={"input" + index} />
<CheckboxLabel htmlFor={"toggle"+index} className="checkbox-label" key={"label" + index}>{item}</CheckboxLabel><br />
Justin Oberle
  • 502
  • 3
  • 22

1 Answers1

1

you need to wrap the component with ${}. Also there's a scss syntax error, you had to remove : from the front of your selection element:

    const HiddenInput = styled.input`
      display: none;
      &:checked + ${CheckboxLabel} {
        background-color: #866dce;
      },
`

note: you can use babel-macro that's included by default in create-react-app

import styled from '@emotion/styled/macro'

emotions

buzatto
  • 9,704
  • 5
  • 24
  • 33
  • I tried this but I get this error... Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion. I think this is for a different import. mine is import styled from '@emotion/styled' – Justin Oberle Feb 19 '21 at 20:05
  • @JustinOberte https://emotion.sh/docs/@emotion/babel-plugin I think you are missing from your dependencies. But if you update to version 8 it should work fine – buzatto Feb 19 '21 at 20:08
  • https://emotion.sh/docs/styled#targeting-another-emotion-component – buzatto Feb 19 '21 at 20:09
  • Hmm I installed the plugin but I am still getting the same error – Justin Oberle Feb 19 '21 at 20:15
  • "dependencies": { "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", "@testing-library/jest-dom": "^5.11.5", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.1", "plotly.js": "^1.58.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-plotly.js": "^2.5.1", "react-router-dom": "^5.2.0", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }, – Justin Oberle Feb 19 '21 at 20:16
  • it is in my devDependencies but I still get the error. – Justin Oberle Feb 19 '21 at 20:23
  • can you try `import styled from '@emotion/styled/macro` – buzatto Feb 19 '21 at 20:25
  • Well, that resolved the error but it is back to square one. The label still doesn't change when checked. – Justin Oberle Feb 19 '21 at 20:27
  • So this is weird. &:hover worked but &:checked did not. I think this is a checkbox issue in emotion styles? When I remove the "display: none" I see checkboxes but when I click them they do not check. This is probably the issue. – Justin Oberle Feb 19 '21 at 20:28
  • I created a simple sandbox with your code (only hardcoding some values) – buzatto Feb 19 '21 at 20:29
  • Ah I got it! One of my styled elements was in the function returning to the dom and it didn't like that. Oh my goodness. What a headache that was. Thank you so much for the help. This resolves it. – Justin Oberle Feb 19 '21 at 20:32
  • If you are still around... How would I pass props into this style if it has to be declared outside of my functional component? For some reason when I declare it inside my function, it doesn't work at all. – Justin Oberle Feb 19 '21 at 21:00
  • i updated the sanbox passing a color props where the default is white fwiw. you need to pass as a function `${props => logic here}` – buzatto Feb 19 '21 at 21:16
  • but what if my props are determined in the main app function as your example is laid out? How would I use those props? It is strange because in other parts or my program I am able to declare the style inside the function everywhere except for this case and I do not know why. I think I need this in order to pass props from the same function. I hope that makes sense. – Justin Oberle Feb 19 '21 at 21:22
  • Oh man. Nevermind. I think I have had too much coffee. This one was obvious. Thanks again for the help – Justin Oberle Feb 19 '21 at 21:27