Hi there 👋, welcome! Please introduce yourself, and if you have a question, please use this: https://help.glamorous.rocks
i'm just hitting a small snag on how to import local font families
i can't find any examples and im not sure how to go about it
didn't want to put an issue for the site in the project repo for the lib
the glamorous.rocks site is also managed/developed on github at https://github.com/kentcdodds/glamorous-website. So if you ever have issues in the future, feel free to create an issue there.
Thanks for reporting it, hope you're having a Merry Christmas.
Hey, I'm currently working on converting an existing component library (that is made up of lots of private packages) over to using glamorous. The docs give an example of using the glamorous() composition method to extend styles of an existing glamorous component, which up to now I've not had any problems with. However now I'm getting an error related to glamor and a cache miss occurring which is normally a sign of multiple instance of glamor running. I assume this is because I'm trying to extend the styles on a component that is located in another npm package, and am ending up with two different instances of glamor. I can get around this problem simply by setting the css prop or the styles themselves on the component, rather than using the glamorous() method; but I was wondering if anyone had any advice on a better way of handling this?
Hey guys, I'm trying to set up glamorous locally for the first time but an error while running "validate" script won't let me :D Somebody willing to give me a hand with this? I was only following instructions in the guide for contributors (so stuck on step 3). Here is the error message I've got:
> glamorous@0.0.0-semantically-released validate /Users/powell_v2/Downloads/glamorous
> kcd-scripts validate lint,build-and-test,test:cover
/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/utils.js:135
scripts = Object.entries(scripts).reduce(function (all, _ref3) {
^
TypeError: Object.entries is not a function
at getConcurrentlyArgs (/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/utils.js:135:20)
at Object.<anonymous> (/Users/powell_v2/Downloads/glamorous/node_modules/kcd-scripts/dist/scripts/validate.js:32:53)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:383:7)
at startup (bootstrap_node.js:149:9)
have responded on github @Powell-v2, sorry I don't always see the gitter notifications. https://github.com/paypal/glamorous/issues/302#issuecomment-355269852
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