When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others.
Despite reading the documentation at , I encountered an issue when trying to use the Label component in my component. It only seems to work with a div component.
I made sure to update styled-components to the latest stable version.
import React from "react";
import styled, { css } from "styled-components";
// Rest of the code...
const TextField = props => {
return (
<Box>
<Input />
<Bar></Bar>
<Label>Name</Label>
</Box>
);
};
export default TextField;
In the CSS lines:
&:focus ~ label,
&:valid ~ label
I am using the base label, but I want to use my custom Label component instead.
I am looking for it to behave like this:
&:focus ~ ${Label},
&:valid ~ ${Label}
Interestingly, the Bar component works correctly in this line:
&:focus ~ ${Bar}:before
It appears that Bar behaves as expected while Label does not.