I am developing a React Component Library and I am struggling to apply some global styles (like resetting things) to the global level to be applied to all my components.
For instance, my app JS is something like this.
import './styles.module.css';
import Button from './Components/Button';
import Navbar from './Components/Navbar';
import Input from './Components/Input';
export {
Button,
Navbar,
Input,
}
and a generic global css file would be something like this:
:root {
padding: 0;
margin: 0;
}
I thought of using the approach from Styled Components as well, but as I don't have anything wrapping my components (it's a library), I don't know exactly where/how to use it.
Any hints ?
This wouldn't be the most elegant solution, but you could create a mixin (with default styles) and import it within each component.
In styled-component you could do it like this:
Define mixin in a file and export it
import { css } from 'styled-components';
export const defaultStyles = css`
margin: 0;
padding: 0;
// other default styles go here...
`
and then use it in each component like:
import styled from 'styled-component'
import {defaultStyle} from './path/to/file/from/where/you/export/defaultStyle'
const Button = styled.button`
${defaultStyles}
border: none;
// other commponent specific styles go here...
`
Related
my question is what is the different between this two { styled }??
import { styled } from "#mui/system";
and
import styled from "styled-components";
---------------------------
hi friends,
i am using material-ui with reactjs to create a website, then i want to add my custom style with help styled-component to the material-ui components ( Specifically, I want to change the AppBar style ) .
But I faced 2 problem.
First problem
i am try to create my custom design with styled-component library:
import styled from "styled-components";
but i must use so many ( !important ) to change the design, like this:
import styled from "styled-components";
import AppBar from "#mui/material"
const CustomNavbar = styled(AppBar)`
background-color: red !important;
position: relative !important;
color: yellow !important;
`;
2.Second Problem - ( it is work without any problem )
i searched for custom styling mui-components then i use the { styled } from mui,
import { styled } from "#mui/system";
and it is work without any problem ..
import { styled } from "#mui/system";
import AppBar from "#mui/material"
const CustomNavbar = styled(AppBar)`
background-color: red;
position: relative ;
color: yellow;
`;
so my question is
what is the different between this two { styled }??
import { styled } from "#mui/system";
and
import styled from "styled-components";
Thank you very much for giving me time and answering this question.
There is section in documentation of MUI about that, if you need to get rid of important, you need to wrap you app in
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>
from mui, because it will change order of importing styles.
source: https://mui.com/guides/interoperability/#css-injection-order
I have some issue using scss directly in material ui, because not all styles are applied. Tried to use makeStyle, but because I use class component, it gives warning about invalid hook call.
The style :
.table-header {
background-color: #005CAA; //only this style works
color: white;
font-weight: bold;
text-align: center;
}
I call in in TableCell component from Material UI
<TableCell className="table-header">Invoice Number</TableCell>
For the scss file, I import it in parent component App.tsx, or I need to import the file directly in the Table component? Thx
I follow the makeStyles approach as it's recommended way of overriding the material-ui styles, else you'd have to use !important in your css/scss files to override the material-ui styles.
https://mui.com/styles/basics/
// component file
import React from 'react';
import { TextLineStyles } from './styles';
export default function TextLine({ text }) {
const classes = TextLineStyles()
return <div className={classes.root}>
<div data-title="line" >
<div data-title="text">
{text}
</div>
</div>
</div>
}
// style.js
import { makeStyles } from "#material-ui/core/styles";
export const TextLineStyles = makeStyles(theme => ({
root: {
'& [data-title="line"]': {
borderTop: `1px solid lightgray`,
'& [data-title="text"]': {
color: 'red' // scss like nesting
}
}
}
}));
If you want to use CSS/SCSS class in MUI component, you should import the file directly in the Table component. But, it's not good to use SCSS with MUI component, you should use makeStyles or withStyles to style the MUI component.
I am not sure if it is the best practice, in fact thats why I ended up in this post.
Here it explain how to use scss with material-ui: https://www.markmakesstuff.com/posts/mui-css-modules
"Just install node-sass"
"if you're working with an app you initialized with a script like create-react-app, you are in luck. No webpack edits necessary. Just give your module a name that ends with ".module.scss""
OTHERWISE
2') You need to "make some minor edits to your webpack config"
"You can then import your module with a name then use that to refer to your classes when writing your fancy JSX"
How i can make an import of antd.css in styled-components? instead of App.css
#import '~antd/dist/antd.css';
The whole purpose is, i want my GlobalStyles from styled-components by default to have all Ant Design styles.
And when i will use elements from AntD it will have all default classes on it.
You shouldn't.
NOTE: At this time we recommend not using #import inside of createGlobalStyle. We're working on better behavior for this functionality but it just doesn't really work at the moment and it's better if you just embed these imports in your HTML index file, etc.
Altought you can try:
import { createGlobalStyle, css } from 'styled-components';
const antdCss = css`
${import('antd/dist/antd.css')}
`;
const GlobalStyle = createGlobalStyle`
${antdCss}
`;
export default GlobalStyle;
I installed 'react app 2' as well as node-sass. It's working fine with SCSS. But I just want to know how can I create component specific SCSS like Angular (that will never be a conflict with other components SCSS)
Angular automatically add an attribute for ViewEncapsulation see below example
In angular, there is an option for
encapsulation: ViewEncapsulation.None (Use to disable CSS Encapsulation for this component)
enter link description here
I know the question is old, but it has no answer, thus I want to share this article. Alsomst does the trick, with the exception that it seems to does not have support for something like ::ng-deep
React doesn't have native component styles like Angular does because it aims to keep away from any functionality that could easily be handled by third-party packages. So you have two pretty simple options:
Use styled-components to create component-specific styles. This is a pretty straightforward package that allows you to define styles for each element within a component and you can even pass variables into the styles. It generates internal CSS (kept in <style> tags in the document head) which will take precedence over external styles by default. Example:
// MainComponent.jsx
import React from 'react';
import styled from 'styled-components';
const Title = styled.h1`
color: red
`
const MainComponent = (props) => <Title>Hello World</Title>
In each of your components, add a class or ID to the root element so that you can simply add that selector to the beginning of your SCSS to only style that specific component. Example:
// MainComponent.jsx
import React from 'react';
const MainComponent = (props) => (
<div className="main-component">
<h1>Hello World</h1>
</div>
)
// MainComponent.scss
.main-component {
h1 {
color: red;
}
}
Now only h1 elements in your MainComponent will be red.
//JS
import React from "react";
import "./yourComponentName.scss";
export default props => {
const { className, children, ...restOperator } = props;
return (
<a className={`yourComponentName ${className}` } {...restOperator}>
{children}
</a>
);
}
//yourComponentName.scss
.yourComponentName{
position:relative;
background:red;
/* your property and value use nesting*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
In the create react app documentation it says the App.css is imported in the App.js. Is there also a way to load the compiled css-file from a component?
// MyViewComponent
import styles from '../../App.css';
You can just import the css file like the below in your component
import './header.css';
Imagine your header.css file looks like
.header {
background-color: rgb(49, 118, 197);
height:100px;
border:10px solid red;
}
To use the style, you can use the class like ,
<div className="header">Hello World</div>
Hope this helps :)
For css files you can just import them like
import "../../App.css"
which will import all of the selectors & CSS rules within that file.
if you're trying to style individual elements within your component with something like:
<div style={myStyles.wrapper} />
then you'll need to export a JS object from a file
Ex:
export default {
wrapper: {
background: "red"
}
}
then you can import it and use it
import myStyles from "../myStyles.js"
<div style={myStyles.wrapper} />