DEV Community 👩‍💻👨‍💻

Paul C. Ishaili
Paul C. Ishaili

Posted on

How I handle rgba() in styled-component - React App

I get the hex code value of the rgba and paste this code in it's place and this fixes the problem.

Example:

const styledHeader = styled.header`
  color: rgba(#000, .3);
`
Enter fullscreen mode Exit fullscreen mode

This will not give the required result so I convert the rgba(#000, .3) into hex code value and get this:

const styledHeader = styled.header`
  color: #0000004d;
`
Enter fullscreen mode Exit fullscreen mode

Note:

I currently use the color picker tool in visual studio code, which works with a .css file, to get the hex code of the colors.


MR. PAUL ISHAILI

Top comments (11)

Collapse
 
marizoo profile image
Marizoo

Cool! thanks for this tip

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

This was inspired from your lampa website project, here 👇

github.com/mrpaulishaili/marizoo-l...

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

Do check the source code. Might redefining it to something better

Collapse
 
marizoo profile image
Marizoo

HI Paul, OK, I see my project is live online there. That is so Cool man. But I don't understand what you are adding to it. "A Redefined Declarative Programming Paradigm version of marizoo-lampa-website". Do you mind explaining it here please? Sorry, noob here at lost.

Thread Thread
 
marizoo profile image
Marizoo

I am excited it's online though... now I can see I need to change that letter spacing on that font. But gonna keep the Kentucky fried chicken as the address coz it's legit.

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili

Kentucky? or do I rather fork the project to another branch that you may merge on your current repository? Do check the source codes and see if the little modification are quite significant.

I'll did be more careful next time.

Thread Thread
 
marizoo profile image
Marizoo

Oh no no the kentucky was a joke. It's perfect buddy. I am happy its live online. Thank you. AH I see, okay you've changed bits of the code so there won't be a problem when you deploy it online? am I right?

Thread Thread
 
marizoo profile image
Marizoo

I am so happy to see it online like that, You've made my month! Thank You buddy! Great job! Now I'm excited to do more projects. Woop woop!!!

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili

I'm happy you are happy I am happy 🙂.

Thread Thread
 
marizoo profile image
Marizoo

Yay! Wishing you a great week ahead! Cheers!

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili

Same.

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!