Skip to content

Instantly share code, notes, and snippets.

💭
Year 4 working on One-Nexus...or is it 5?

Edmund esr360

💭
Year 4 working on One-Nexus...or is it 5?
Block or report user

Report or block esr360

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View styles.js
import { createUseStyles } from 'react-jss';
export default createUseStyles(theme => ({
heading: ({ props, config, state }) => ({
...
}),
...
}));
View MyComponent.jsx
import React, { useState } from 'react';
import { useTheme } from 'react-jss';
import { useStyles, useConfig } from './assets';
const MyComponent = ({ heading, children, ...props }) => {
const [isActive, setActive] = useState(false);
const theme = useTheme();
const config = useConfig(theme);
const classes = useStyles({ props, config, state: { isActive } });
View MyComponent.jsx
import React, { useState, useContext } from 'react';
const styles = ({ props, state, context, theme }) => ({
...
});
const MyComponent = (props) => {
const [isActive, setActive] = useState(false);
return (
View styles.js
const styles = ({ props, state, context }) => ({
display: 'block',
border: '1px solid',
heading: ({ props, state }) => ({
fontWeight: props.strong && 'bold',
color: state.isHovered ? 'blue' : 'red'
}),
content: {
View MyComponent.jsx
const MyComponent = (props) => {
...
return (
<div style={styles} onClick={() => setActive(!isActive)}>
<div style={styles.heading({ strong: true })}>{props.heading}</div>
<div style={styles.content}>{props.children}</div>
</div>
)
}
View styles.js
const styles = ({ props, state, context }) => ({
display: 'block',
border: '1px solid',
heading: (props) => ({
fontWeight: props.strong && 'bold',
color: 'red'
}),
content: {
View styles.js
const styles = ({ props, state, context }) => ({
display: 'block',
border: '1px solid',
heading: {
fontWeight: 'bold',
color: 'red'
},
content: {
View MyComponent.jsx
import React, { useState, useContext } from 'react';
import someContextObject from '../someContext';
import someThemeContext from '../theme';
const useStyles = ({ props, state, context, theme }) => ({
...
});
const MyComponent = (props) => {
const [isActive, setActive] = useState(false);
View MyComponent.jsx
import React, { useState, useContext } from 'react';
import someContextObject from '../someContext';
const useStyles = ({ props, state, context }) => ({
...
});
const MyComponent = (props) => {
const [isActive, setActive] = useState(false);
const context = useContext(someContextObject);
View styles.js
const styles = ({ props, state, context }) => ({
display: 'block',
fontSize: props.large ? '18px' : '12px',
...(context.grid && {
display: 'inline-block',
border: '1px solid'
}),
heading: {
You can’t perform that action at this time.