I have a react-typescript project I am working on currently. My engineering manager would insist that I use redux-form alongside styled-component.
my challenge is that I can't successfully find a way of getting this done. and I have browsed through a lot of online resources. I actually haven't found any possible help out there.
I would appreciate if anyone who probably have had to work with these two libraries (redux-form && styled-components) or just have an idea, can help out.
this is an instance of my code-base(what I've done so far)
simple-field-input.styles.tsx
import React from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import { SimpleFieldProps } from './simple-field-input.type';
const ReduxFormField: React.FC<SimpleFieldProps> = ({ componentType }) => {
return <Field component={componentType} name="email" id="email#us" className={'tes-hello'} />;
};
export const Container = styled(ReduxFormField)`
outline: none;
border: none;
background-color: orangered;
color: yellow;
`;
it displays the input element but doesn't reflect the style
thanks as you help
Related
I have a NextJS app being used with styled-components.
I have these 3 files:
Worth noting that some markups are removed for clarity sake so only the related codes are pasted.
Header.js
import {
HeaderContainer,
SearchInput,
SearchWrapper
} from './HeaderStyles';
import { Input } from '../GlobalComponents/GlobalComponents';
const Header = () => {
return (
<HeaderContainer>
<SearchWrapper>
<SearchInput type='text' placeholder='Search movie' />
</SearchWrapper>
</HeaderContainer>
);
}
export default Header;
HeaderStyles.js
import styled from 'styled-components';
import { Input } from '../GlobalComponents/GlobalComponents';
export const HeaderContainer = styled.header`
background-color: ${props => props.theme.colors.primary};
display: flex;
align-items: center;
box-sizing: border-box;
`;
export const SearchWrapper = styled.div`
flex-grow: 3;
background-color: red;
`;
export const SearchInput = styled(Input)`
background-color: yellowgreen;
`;
GlobalComponents.js
import styled from "styled-components";
export const Input = styled.input`
padding: 1rem;
`;
Attached is my
Project Structure
Note that inside HeaderStyles.js, the SearchInput is extended from Input in GlobalComponents.js
Whenever I change css properties in HeaderStyles.js, the fast refresh works just fine. However, in the case of GlobalComponents.js, I had to manually reload the page to view the changes.
If I were to put my generic Input styling into HeaderStyles, it works fine, but that isn't how I wanted to structure it. So I guess it somewhat related to the imported modules not being in the React tree or stuff like that.
I have been looking for solutions online but got no luck. Would like to know the causes and solution for this. Thanks in adv.
I think your problem about styled-component at SSR.
You can try change your pages/_document.js and your babel config.
add this codes to .babelrc
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
_document.js
https://github.com/vercel/next.js/blob/main/examples/with-styled-components/pages/_document.js
with the Next Complier on new version of next, you should only update your next.config file and _document file, and you will be all set. Babel will cause conflict with the NextJS compiler.
https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
Make sure you have pages/_document.js with codes stated here.
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...
`
I'm trying to get used to styled-components in react. But it doesn't seem to work all the time. I'm currently using it in a project. While it works perfectly in some components, it doesn't apply the styles in some others.
Here's my code where it doesn't work.
I created the styles-components in a separate file (card.js) and folder (styles) and exported them like so;
import styled from 'styled-components/macro';
export const Title = styled.p`
font-size: 24px;
color: #e5e5e5;
font-weight: bold;
margin-left: 56px;
margin-right: 56px;
margin-top: 0;
`;
... (other components created the same way)
I then imported them in a file (index.js), in the same folder as the styles folder, containing the card.js file, where I used them like so;
import React from 'react';
import {Title, (some other components) } from './styles/card';
export default function Card({ children, ...restProps }) {
return <Container {...restProps}>{children}</Container>
}
Card.Title = function CardTitle({ children, ...restProps }) {
return <Title {...restProps}>{children}</Title>;
};
I then
I used the same method in all other styled-components files, but it doesn't work here. I'd like to know the cause, or if there's a better method of using styled-components.
Figured it out! React styled-components works perfectly when applied correctly. The problem was a typo error in my code.
I wrote
&{Picture}
when calling an earlier declared styled component instead of
${Picture}
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"
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;
}
}