Currently I have this:
const ButtonStyles = {
color: 'red',
}
But I want to add a Media Query for mobile, would it look something like this?:
const ButtonStyles = {
color: 'red',
'#media (max-width: 900px)': {
color: 'blue',
}
}
If the syntax is not in this format, then how is it supposed to be done?
Give a try.
https://github.com/kasinskas/react-native-media-query
Work just like RN StyleSheet, but with queries.
https://github.com/yocontra/react-responsive
Work with functions inside regular RN StyleSheet
An eg. with natives StyleSheet, Platform and React-Responsive and variables.
import { StyleSheet, Platform } from 'react-native';
import { useMediaQuery } from 'react-responsive';
export const STYLES = StyleSheet.create({
content: (setup) => {
const justifyTo = setup?.justify ? setup.justify : 'flex-start';
return {
justifyContent: justifyTo,
...Platform.select({
web: {
width: useMediaQuery({ maxWidth: 767 }) ? '100vw' : '70vw',
maxWidth: 1280,
marginHorizontal: 'auto',
marginVertical: 'auto',
},
}),
};
}
});
According to this discussion You cannot use Media queries with react css objects. You must use stylesheets with class names or other external modules like styled components.
Related
how can I reproduce the following scss using a plugin?
.large-title {
font-family: $font-family-2;
#apply leading-none;
color: $large-title-color;
#apply uppercase;
#apply text-xl;
// I don't know how to add these in the plugin
#apply sm:text-2xl;
#apply md:text-3xl;
#apply lg:text-4xl;
#apply xl:text-5xl;
}
in my config file, I currently have:
module.exports = {
[...]
plugins: [
require('#tailwindcss/forms'),
plugin(function({ addBase, config }) {
addBase({
'.large-title': {
fontFamily: [config('theme.fontFamily.family-2')],
fontSize: config('theme.fontSize.xl'),
lineHeight: config('theme.lineHeight.none'),
color: config('theme.colors.primary.900'),
textTransform: 'uppercase',
},
})
})
],
}
The only thing missing is I can't find out how to add the responsive size changes from the class in the plugin.
One way to add #media queries to a class in Tailwind's CSS-in-JS syntax is nesting:
addBase({
'.large-title': {
'#media (min-width: 500px)': {
fontSize: theme('fontSize.xl'),
}
},
})
Additionally, user's breakpoints can be accessed using the theme() function:
const sm = theme('screens.sm', {})
Combining these two snippets you could:
const sm = theme('screens.sm', {})
addBase({
'.large-title': {
`#media (min-width: ${sm})`: {
fontSize: theme('fontSize.xl'),
}
},
})
One caveat to be aware of in case you're building this plugin for public use is that a user may entirely change their theme.screens config. If a user removes the theme.screens.sm key from their configurations, for example, the snippet above would no longer work.
I'm trying to overwrite the default CSS of an external component which isn't developed in Material-UI or my project. In styled-components, I can just take the root classes and replace them with my custom CSS. How do I do the same with Material-UI-React?
.ace-tm .ace_variable {
color : red
}
Suppose I've to replace those two classes with the new color property, how do I do it in Material styles?
This is what I've tried with no luck!
const Styles = {
" & ace-tm": {
"& ace_variable": {
color: red,
fontSize: "16px"
},
}
};
I'm using withStyles to later inject them in the components.
I just found this and thought I'd share the solution for posterity:
const GlobalCss = withStyles((theme) => ({
'#global': {
'.ace-tm .ace_variable': {
color: 'red',
},
},
}))(() => null)
const SomeComponent = () => {
return (
<>
<GlobalCss />
<h1>Hey Jude</h1>
<SomeComponentWhoseCSSWillBeModified />
</>
}
Read more on this here: https://material-ui.com/styles/advanced/#global-css
I am trying to customize the colors in withAuthenticator HOC aws-amplifier login screen.
I followed:
https://aws-amplify.github.io/docs/js/authentication#using-components-in-react
and also read:
https://medium.com/#coryschimmoeller/customizing-the-authentication-experience-of-amplifys-withauthenticator-e6f2089ff469
import { AmplifyTheme } from 'aws-amplify-react';
const myTheme = {
...AmplifyTheme,
BackgroundColor: { color: 'blue',backgroundColor: 'blue' },
button: { color: 'blue',backgroundColor: 'blue' },
amazonSignInButton: { color: 'blue',backgroundColor: 'blue' },
signInButton: { backgroundColor: 'blue' , color: 'blue'}
};
...
//export default App;
export default withAuthenticator(App, myTheme );
amplify still renders the AWS default look and feel. I doesn't make any difference what I put in myTheme, looks like as if it is ignored completely.
Thanks for any feedback in advance.
You need to adress the different elements like so:
import { AmplifyTheme } from "aws-amplify-react";
const authTheme = {
...AmplifyTheme,
sectionHeader:{
...AmplifyTheme.sectionHeader,
color:"red",
},
formSection: {
...AmplifyTheme.formSection,
backgroundColor: "green",
},
sectionFooter: {
...AmplifyTheme.sectionFooter,
backgroundColor: "purple"
},
button: {
...AmplifyTheme.button,
backgroundColor: "blue"
}
}
export default withAuthenticator(App, { theme: authTheme });
If you are not sure about the names of the different elements you can look them up in the developer console of your browser. It´s a bit tedious but i haven´t found a documentation so far
Taken from the documentation:
Web
const MyTheme = {
signInButtonIcon: { 'display': 'none' },
googleSignInButton: { 'backgroundColor': 'red', 'borderColor': 'red' }
}
<Authenticator theme={MyTheme} />
Web components reference
React Native
import { AmplifyTheme } from 'aws-amplify-react-native';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });
<Authenticator theme={MyTheme} />
React Native components reference
Since the question is about withAuthenticator specifically, the previous examples apply to that too:
export default withAuthenticator(App, false, [], null, MyTheme);
// react-native example
import { StyleSheet, View } from 'react-native';
const styles = {
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
}
}
const stylesRN = StyleSheet.create(styles);
<View style={stylesRN.container}></View>
What the best way to reuse
// inner styles
{
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
}
in both react-native and react?
What i want to achieve in pseudocode (or another way of reuse in React):
<div style={magicAdapter(styles.container)}>Hello World!</div>
Problem: It is impossible to reuse all react-native inline-styles in react as is without magicAdapter.
What you could do is store all your styles in an object in some file e.g. const containerStyles = { borderRadius: 2 }, export it, then for React Native use the StyleSheets javascript class to create the styles for your div container
import {containerStyles} from '../someFile.js'
const styles = StyleSheets.create({
container: containerStyles
})
then for React you could do inline styling with the same object, but be aware that not all styles supported in StyleSheets can be used for inline styling, so if you want to do something equivalent there's libraries out there like emotion.js to dynamically load CSS in JS
https://github.com/emotion-js/emotion
Heres an example
import {css} from 'emotion'
import {containerStyle} from '../someFile'
const getContainerStyles = css`
border-radius: ${containerStyle.borderRadius}
`
export default class SomeClass extends Component {
render() {
return(
<div
style={getContainerStyles}
>
</div>
)
}
}
I hope this helps
You could concatenate the style of your new component with the style of container, like below
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
newComponent:{
// New component style
}
});
<View style={[styles.container, styles.newComponent]}>
</View>
// your component file name (button.js)
import React, { Component } from 'react';
// import the style from another file present in the same directory
import styles from 'button.style.js';
// you can reuse this style in another component also
class Button extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.buttonText}> Press Me! </Text>
</View>
);
}
}
export default Button;
// your style file name ( "button.style.js")
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
padding: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#43a1c9',
},
buttonText: {
fontSize: 20,
textAlign: 'center'
}
});
According to this reference https://github.com/airbnb/javascript/tree/master/css-in-javascript, a styled JS component should be written like this:
function MyComponent({ styles }) {
return (
<div {...css(styles.container)}>
Never doubt that a small group of thoughtful, committed citizens can
change the world. Indeed, it’s the only thing that ever has.
</div>
);
}
export default withStyles(() => ({
container: {
display: 'inline-block',
},
}))(MyComponent);
I'm trying to write a simple React component like following, without success (I'm receiving a withStyles is not defined error):
import React from 'react';
const MyComponent = ({styles}) => {
return (
<div {...css(styles.container)}>Hello World</div>
)
}
export default withStyles(() => ({
container: {
color: 'red'
},
}))(MyComponent);
What am I doing wrong? Is it possible to use this convention for a React component?
You can do it like this
const divStyle = {
color: 'blue',
fontSize:10px
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
However you can try other better approaches.Please refer to the link below:
https://medium.com/#aghh1504/4-four-ways-to-style-react-components-ac6f323da822