React Native "Styled-components" not working - javascript

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).

Related

Material UI v5 styles applied to class does'nt apply?

I am trying to style the MUI slider,so I decided to style it using the className prop. But the style applied to the main class does'nt get applied,while rest other styles like 'hover' state get applied. If I remove all the classes and just style it using SX prop,everything works fine. But I want to keep the styles seperate into an external css file.
Below is my code :
App.css
.container{
margin-left: 30%;
margin-top: 20%;
}
/* This does'nt get applied */
.slider {
color: #ff0000;
width: 300px;
}
.slider:hover {
color: #2e8b57;
}
.slider > .MuiSlider-thumb {
border-radius: 1px;
}
App.js
import "./App.css"
import * as React from 'react';
import Slider from '#mui/material/Slider';
export default function App() {
return (
<div className="container">
<Slider className="slider" defaultValue={30} />
</div>
);
}
The problem is with Material UI style injection order. The custom styles do apply, but Mui styles are injected before the custom style so they doesn't have effect in this case.
This guide explain how to change the injection order:
https://mui.com/guides/interoperability/#css-injection-order
I don't know if it is required, but I use css modules and material-ui. You can rename your css file to
App.module.css
then import like so
import styles from "./App.module.css"
you can then use it like
<Slider className={styles.slider} defaultValue={30} />
In Nextjs you can throw everything in styles.css to make it global, but I don't know if that is also for react as well.

Error trying to style a component directly with styled-components

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.

Difference between className and style-component in React

Why should I use styled-components if having a className against an element does the work of styling?
Applied style :
h2.subTitle{
font-size: 2em;
color: blue;
}
Element to be styled using className :
<h2 className="subTitle">Gucci Snakes </h2>
Using styled component :
import styled from 'styled-components';
const Subtitle = styled.h2`
font-size: 2em;
color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>
From the docs,
styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
This helps with regards to class/style name collision.
https://styled-components.com/docs/basics#motivation
It's used because of readability, classNames might work well, but you don't love them that much when you have 1 or 2 css files with 500 rows, also, the structure of styled components is similar to sass.
For more examples and info you can click here , here and here

Changing the CSS for a React component has effect on all other pages

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.

Random classes getting displayed when we use styled components?

Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene?
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
render(
<div>
<Button
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
primary
>
GitHub
</Button>
<Button as={Link} href="/docs">
Documentation
</Button>
)
if we inspect and check the element in the developer tools , i can able to see some random classes display like as follow;
<a
href="https://github.com/styled-components/styled-components"
target="_blank"
rel="noopener"
class = "sc-jDwBTQ "
>
GitHub
</a>
Currently styled-components uses MurmurHash algorithm to create a unique identifier and then converts the hash number to alphabetic name.
Each component instance with unique props has it’s own CSS class name which is generated by means of the MurmurHash algorithm, the componentId and the evaluatedStyles string:
const className = hash(componentId + evaluatedStyles);
Then this class name is stored in the component state as generatedClassName.
This was about all I could find in the styled-components FAQ
Each node actually has two classes connected to it: one is static per
component, meaning each element of a styled component has this class.
It hasn't any style attached to it. Instead, it's used to quickly
identify which styled component a DOM objects belongs to or to make
minor changes in the DevTools. It's also used for component selectors.
The static class probably will look something like: .sc-fVOeaW.
The other is dynamic, meaning it will be different for every element
of your styled component with different props, based on what the
interpolations result in. It will probably look like .fVOeaW (note the
lack of "sc" prefix.)
For example, the styled component <Button /> would render with the
same static class every time. If the styles are changed using
interpolations, like <Button secondary />, then the dynamic class will
be a different one, while the static class would remain the same.
Also, Motivation
No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
TL;DR They are automagically generated and maintained by styled-components.
Are you using Material UI for reactjs by any chance? If so,then just check in the package.json about the version details. If it's version has "rc" appended to it, then please update it to the previous/next stable version.

Categories