Hi there 👋, welcome! Please introduce yourself, and if you have a question, please use this: https://help.glamorous.rocks
I've a stupid question that's for sure.
I've this code:
const Box = glamorous.div(
{
display: 'flex',
flex: 1,
flexDirection: 'column',
},
space,
width,
fontSize
);
const App = () => (
<Box width={1 / 2}>
<a href="#" style={{backgroundColor: 'green', color: 'white', padding: 10}}>A link</a>
</Box>
);Obviously I'm doing something wrong, since the link (anchor tag) gets displayed as flex as well, and I do not want that
I've tried with
'&' > { ... } as well
hey @blackxored I've just tried to replicate the issue and have had no luck. the code you've provided seems to behave as expected. https://codesandbox.io/s/3rzvz387m
Hey carl, glamorous has bundled declarations so in most cases it should work out of the box with typescript (ts/tsx) files. If you're able to create a small reproduction repo with how you've setup typescript and an example file which is triggering
cannot find module 'glamorous' I'll be able to have a look further.
The link shouldn't be flexed
My apologies if a dumb questions as I've spent the last two years on RN land ;)
Hi @blackxored! There's actually an example on the website: https://glamorous.rocks/integrations#styled-system(https:github.comjxnblkstyled-system)
Hey folks, glamorous has found its way into my next project and everything is going great. However, I seem to have run into one issue, and I'm not sure if it's just a (totally justifiable) limitation of glamorous or something that isn't quite clear to me.
https://codesandbox.io/s/qx2qo971n6
What I'd like to be able to do is create a Block component that accepts a prop that will be applied to the style.
Let me know if I can clarify anything further here.
What I have "works", but I'm not sure if that's the best way to go about accomplishing what I need.
Hey @rjhoffmann, here's another arguably better way to do what you were trying to do: https://codesandbox.io/s/n0v60nk12j
All other glamorous components render fine, just that one.
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
