My colleagues and I have successfully been using React-JSS: https://cssinjs.org/react-jss
However, to date the styles have been embedded in React component files. As the number of styles have grown, we'd like to move them out into either a styles.js or a styles.css file (we don't care which).
Trying this so far has not been successful.
Might anyone who has done it, be able to offer some tips?
It sounds like you have big files with big/many components and it looks like the amount of styles is the problem.
I would say split your components into separate files and keep styles close to components.
I don't recommend reusing styles without their components, because it leads to leaks.
Really late, but create a file with e.g exampleStyles.js extension:
import { createUseStyles } from 'react-jss';
const useStyles = createUseStyles({
<Your styles>
});
export default useStyles;
Then just import them where ever you want to use them but make sure after importing you declare them before using:
const navbar = () => {
const classes = <importedStyles()>;
return (
<div className={classes.navbar}>
);
};
OMG I don't know why things didn't work earlier today. I simply put my style code into styles.js like this:
const styleSheet = {
mainContainer: {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
backDrop: {
minHeight: '100vh',
},
// ... more styles here
};
export default styleSheet;
And then imported it into the React component file with: import styleSheet from './styles.js';
It all works great! Thank you all for the inspiration.
Related
I am working on a React project (react#18.2.0, styled-components#5.1.1) that has been set up to use styled-components so that commonly used components are exported from a common/styled.js file, but that causes a great amount of invalid hook call errors.
Right now, it looks something like this:
export const ExampleButton = styled.button`
color: white;
`;
And then those styled componets are imported where needed, like this:
import { ExampleButton, SomeComponent, AnotherComponent } from '../common.styled';
I know they invalid hook calls are caused by this export/import setup, because the error message for one particular styled component goes away when I remove it from common/styled.js and instead paste it locally everywhere it's needed, so that instead of this:
import { ExampleButton } from '../common.styled';
const ExampleComponent = () => {
return (
<div>
<ExampleButton>Hello</ExampleButton>
</div>
);
};
I do this:
import styled from 'styled-components';
const ExampleComponent = () => {
const ExampleButton = styled.button`
color: white;
`;
return (
<div>
<ExampleButton>Hello</ExampleButton>
</div>
);
};
So that works, but it's not really a viable solution, because I would have to paste the same code everywhere, not just ExampleComponent, and doing that for the whole project would result in a massive amount of code repetition.
What is the right way to create a solution similar to common/styled.js here in a way that doesn't break the Rules of Hooks?
It seems that there had been an issue between some older versions of styled-components and React 18 that have been solved in v5.3.1.
https://github.com/styled-components/styled-components/pull/3564
Maybe upgrading styled-components to v5.3.1 or higher would solve the issue.
I know there are so many questions about this Error. And I have faced so many times with this error and answers over here helped me so Much to get Over that Error. But now I just wanted to use react-native-maps and in the documentation of react-native-maps they gave us this sample of code to run and see how things work. I copied this code and paste it into my App.js and ı got this problem. I tried to something to solve that but ı couldnt figure it out.
I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExpoRoot`
And here is My code :
import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
export const App = () => {
return (
<View style={styles.container}>
<MapView style={styles.map} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
As you said, this is a common error you can see while developing with React Native.
It occurs when the component name is wrong or the import path is entered incorrectly. To solve the problem, you need to check all the import statements and check if those are exported and imported correctly.
This usually happens when you export functions like the below.
export const HelloWorld = 'hello world';
Then import like below.
import HelloWorld from 'helloWorld';
I saw many people having similar mistakes. Hope you can check that out.
I'm attempting to use ready-made themes for Bulma components (https://jenil.github.io/bulmaswatch/) in my React app, in a way that allows the user to toggle between them (specifically, between Flatly and Darkly).
I can import one theme at a time, but can't figure out how to implement switching between the contents of two .css files. I have attempted searching, but I only find generic solutions for very basic custom themes that do not seem to be suitable for switching between ready-made themes.
Below is an example of the kind of stuff I find, but I don't know how to scale it up to using two 100kb+ .min.css files.
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext( themes.dark // default value);
I've looked into code prettifiers like google-code-prettify, beautify, etc. Unfortunately, I haven't been able to get any of these to work in my React app. I am currently using react-ace to display dynamically populated code snippets, but they are only color-highlighted, not formatted.
Are there any simple examples of some way that I can get this to work in a React App? It doesn't have to be using Ace editor - that was sort of my hack to get the code displayed somewhat nicely.
Thanks for this question, you can use prettier to format the code. You may need to configure different parser based on the language or framework you are using.
Here is a sample codesandbox for formatting JS code. Link: https://codesandbox.io/s/currying-architecture-tm785?file=/src/App.js
Code for the main file:
import React from "react";
import prettier from "prettier/standalone";
import babylon from "prettier/parser-babel";
import "./styles.css";
export default function App() {
const [code, setCode] = React.useState(`
const a = "abc";
const b = 'a'
console.log(a);
`);
const formatCode = () => {
const formattedCode = prettier.format(code, {
parser: "babel",
plugins: [babylon]
});
setCode(formattedCode);
};
return (
<div className="App">
<textarea
style={{ height: "100px", width: "100%", display: "block" }}
value={code}
/>
<button onClick={formatCode}>Format Code with Prettier</button>
</div>
);
}
Hope this helps!
I wanna custom the floating Label of TextField.
I know creating a new one works like below, but is there a better way?
import TextFiled from 'material-ui/TextField';
class TextFiledNew extends Component {
static propTypes = {
}
render () {
return (
<TextFiled
floatingLabelFixed={true}
floatingLabelStyle = {{top: '88px', textTransform: 'uppercase', letterSpacing: '0.1em'}}
/>
)
}
}
module.exports = TextFiledNew
I tried the changing Theme way, but it doesn't work.
const muiTheme = getMuiTheme({
textField: {
floatingLabel:{
top: '88px',
textTransform: 'uppercase',
letterSpacing: '0.1'
}
}
});
That works just fine! We use several components with a custom wrapper around them from material-ui. Our EnhancedMenuItem lets us add some optional icons and transitions in some circumstances. Definitely experiment with the library and make your own modifications to get it exactly right for your needs.