Hi there š, welcome! Please introduce yourself, and if you have a question, please use this: https://help.glamorous.rocks
Hey @CallumDenby , I've just tried to replicate the issue and don't seem to be able to. the following reproduction in safari appears to work fine for me https://codesandbox.io/s/jp15y2qkv5. if your able to set up a codesandbox reproduction or share the whole code that is leading to the issue I'd be happy to have another look.
Hi @luke-john, I haven't managed to replicate the issue but I found a work around being to just style the div, it seemed to only be the glamorous.a component in use so I just wrapped it.
const Link = ({ href, children }) =>
<Div css={{
padding: '5px',
}}>
<a href={href}>
{children}
</a>
</Div>
@kentcdodds the link to "the chat" in the codesandbox https://help.glamorous.rocks/ is pointing to https://gitter.im/kentcdodds/glamorous it should be updated to point to here (https://gitter.im/paypal/glamorous)
My use case is to allow color and background color css properties to accept a "Color" type as a valid value
(I should specify that this is using TypeScript)
here is a sandbox showing the issue https://codesandbox.io/s/rk8von4wo
was wondering if anyone knows how to use a glamorous component with React Router Link\
hey guys, i just published a post on how to make glamorous work with native elements, (
h1, div, etc.), check it out https://adrianperez.codes/glamorous-in-next-js-with-native-elements-styling/
is there a way to do child component selectors?
or do i have to pass a prop down to every child that needs to be changed
i'm doing somehting like this right now
export default glamorous.nav(
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
export default glamorous.nav(
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
```
{
position: 'absolute',
display: 'flex',
left: 0,
right: 0,
top: 0,
margin: 0,
height: '90px',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 1000,
},
({ type, theme }) => ({
backgroundColor: type === 'primary' ? null : theme.white,
boxShadow: type === 'primary' ? null : theme.boxShadow,
'& div > ul > li > a': {
color: type === 'primary' ? theme.white : theme.blue,
fontWeight: '400',
letterSpacing: '1px',
},
}),
);
```
oops
new to gitter
sorry about that
but it'd be much easier if i could just do child selectors from the parent nav component
instead of passing props down to every single component that needso tbe changed
Hey, would someone be able to help me understand why themes don't seem to be passed through glamorous to custom components? I set up a test case here: https://codesandbox.io/s/017659o850
And if you can share what you're doing in that deprecation issue that would be very helpful!
Btw, we've just completed the migration of our codebase. About 110 modules, so probably about 400 glamorous components of various sizes, all moved over to emotion. Biggest painpoints were a)
withProps (the recompose variant is way more painful to work with than the glamorous one), b) typing (the emotion TypeScript types are a little 'immature').
Here's what I've ended up with for rtl-css-js: https://gist.github.com/RoystonS/15e9fcd6aed5c67eb203d01936bd110a
(That's not terribly efficient, but it works for now.)