I'm trying to style a component like this:
function _MenuItem({label, icon}){
return <div>
{icon}
<p>{label}</p>
</div>
}
export const MenuItem = styled(props => <_MenuItem {...props} />)`
color: red;
p{color: red}
*{color: red}
`
The component is rendering, but the styles are not being applied.
I have managed to apply the styles by making a styled div and creating the component from that div, but I was wondering if there is a way to apply the styles directly to the component?
I am very new with react and more with styled-components so I assume that I have misunderstood some basic concepts.
Making a styled div is the correct way of doing things. I couldn't find anything on styling a component directly nor felt the urge to done it before.
Even when the styled-component docs describe how to style any component, they are basically styling an element just with a different syntax.
There doesn't seem to be a good enough reason to do what you want to do, since you can achieve what you want to achieve by using the styled components as intended.
The following way of doing things works and it is super simple:
import styled from "styled-components"
const _MenuItem = ({label, icon}) => {
return <Root>
{icon}
<p>{label}</p>
</Root>
}
const Root = styled.div`
color: red;
p{color: red}
*{color: red}
`
export default _MenuItem;
Please let me know if I'm missing some specific use-case or something other.
Related
how can i style same type of elements but diffrent ones with diffrent css properties in styled components ?
for example
<div></div>
<div></div>
with knowledge i have i can do
export const StyledDiv = styled.div`
color:red;
`
and change <div></div> to <StyledDiv></StyledDiv>
but what if I want to change each of these divs with different styles? for example, I want one of them to have the color blue one and of them to have the color red
and these 2 elements are just for example to show you the meaning
now imagine a page with 10s of divs each with different style
What's the best way to deal with them?
You can simply pass props to the styled component like so:
const StyledDiv = styled.div`
color: ${props => props.color};
`;
And in your component:
return <StyledDiv color="red">...</div>;
I am fairly new to react-native and javascript, I recently attemped to use styled components in react native, which allows you to style components using css-like syntax. In this case, I want to change the name of a View to div and then style it, but div is not being used and therefore the styles does not apply.
Here is my code:
import { Text, View } from 'react-native';
import styled from 'styled-components/native';
const div = styled.View` // "div" is not being used
flex: 1;
justify-content: center;
align-items: center;
background-color: pink;
`
function ScreenTimePage() {
return (
<div>
<Text> Some Text </Text>
</div>
);
}
How can I solve this?
React requires that component names start with a capital letter so it can distinguish them from HTML elements.
Call it Div instead (better yet, name it something that describes what it is for and can’t be confused with an HTML element).
I was trying to make border around an image and my custom css was not working because of Image component css, it was overriding over my custom css and also applied tailwind and bootstrap to fix it but I was unable to fix it. Now I am not getting any clue to fix it I read some github issues but they are not enough to fix it.
code:code link
Example of how to use :global(_selectors_here_) with !important:
import Image from "next/image";
import sli from "./sl.png";
export default function IndexPage() {
return (
<div>
<Image className="ava" src={sli} alt="hello" />
<style jsx>{`
:global(.ava) {
border: 3px solid red !important;
}
`}</style>
</div>
);
}
To make className work in external component, you have to either use :global or the resolve tag.
And to override inline styles, with tailwindcss, you can use important modifier like !border.
I have a React component with the following files:
src/components/HomePage/index.js
src/components/HomePage/style.scss
The component is very simple:
import React from 'react';
import './style.scss';
const HomePage = () => {
return (
<div className="homepage">
<h1>Landing page</h1>
</div>
);
};
export default HomePage;
Within style.scss I am applying a style to all <h1> tags:
h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
And it works as expected. However, I now see that the h1 style within styles.scss is being applied to every h1 on my site, even on pages that do not use this component.
I am using Gatsby, but it's a React app at heart. My understanding is that React's code-splitting feature would take care of this, that the code from style.scss would only be included in bundles for any page that uses my component.
It's the why that I am asking about. I have two easy fixes:
Wrap everything in style.scss in a .homepage wrapper
Use CSS modules and rename the file to style.module.scss. When I see people do that they always do `import style from './style.module.scss' - is there a way to have CSS modules without assigning it to an object like that?
Update: Coming back to this question after spending a lot of time with React and I think there's a gap in the market for React styling. CSS modules is syntactically poor in my opinion and having to manually wrap everything in a .home tag to localise it is manual work I don't want to do. Someone should really create a React plugin that automatically does this so that whenever I have a file called Home.js and I import Home.css that all the CSS is automatically restricted to Home.js without me having to do anything special.
If you want to localize CSS rules, then you would have to switch to modular stylesheets (works the same for sass stylesheets).
In your current structure, the component imports non-modular stylesheet and doesn't localize the changes with a unique identifier. Therfore added rules live in a global scope without a unique identifier that would localize them so that only selected components could understand them. That means that they are capable of easily overwriting the same-named rules which were previously established (import order matters here, because it would dictate how the bundler appends the output stylesheet).
So instead of holding component-related rules within ./style.scss file, rename it to ./index.module.scss and then you would utilize it within the component like so:
import React from 'react';
import styles from './index.module.scss';
const HomePage = () => {
return (
<div className={style.homepage}>
<h1 className={style.heading}>Landing page</h1>
</div>
);
};
export default HomePage;
and your stylesheet would look like:
.heading {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
disclaimer:
I've changed the styling convention from selecting elements by their tag, to selecting them by class, because targetting elements by tag is widely considered a bad practice [ref] , but if you want to maintain it, then you would have to provide a parent scope for such a rule (it already exists since the parent <div/> element has an assigned class.
In this case the implementation would look like:
import React from 'react';
import styles from './index.module.scss';
const HomePage = () => {
return (
<div className={style.homepage}>
<h1>Landing page</h1>
</div>
);
};
export default HomePage;
and styles:
.homepage {
h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
}
You can either go with the easiest way that is mentioned below.
import React from 'react';
import './style.scss';
const HomePage = () => {
return (
<div className = "home">
<div className="homepage">
<h1>Landing page</h1>
</div>
</div>
);
};
export default HomePage;
You can wrap whole html inside one div of particular component name
CSS:
.home h1 {
color: #f3f3f3;
font-family: "Cambria";
font-weight: normal;
font-size: 2rem;
}
This is the easiest way. However this is my personal solution because I also face the same issues when I was beginner at react.
I'm using react-color as my color picker. console.log('Current color:', this.state.color); outputs color in rgba value. So what I want to achieve is changing component colors with a color picker value. Really amateurish I know, what I tried so far was adding classes to divs and with React Helmet:
export class Intro extends React.Component {
render() {
return (
<Style>
{
.intro:hover {
background-color: red;
}
}
</Style>
)
}
}
This wrote it perfectly fine inside </head> tags. And all elements with that class changed the color. When I tried to use this state inside the bracket, it rendered as a raw text color={ this.state.color } inside the style tags. This is the closest workaround I've got. I had no luck setting inline styles into an existing component.
Thanks in advance!
Check out the first option in this article. I think you're mixing terminology. export class is not a css class, that's a javascript ES6 class. CSS goes inside an object and can be passed inline to a DOM element. If you want to use the :hover selector, you'll have to assign a className to the element you are wanting to apply this to and import a css file. This is the example I have below.
file.css
.intro:hover {
background-color: red;
}
file.jsx
export class Intro extends React.Component {
render() {
return (
<div className="intro">some contents</div>
)
}
}