I'm using React-jss to set up global style. For example:
export default {
'#global': {
body: {
margin: 0,
fontFamily: '"Lobster", cursive, Roboto, "sans-serif"',
},
},
};
Code above works for me but when I want to style for css like this it not working.
export default {
'#global': {
body: ...,
'& *:before, & *:after': {
boxSizing: 'border-box',
},
},
};
I've searched on their github issues, on google, on their docs but still not find any answer for this question. Pls help me, thank you guys
Related
I'm using Next.JS v13 and having trouble understanding how #next/font works under the hood. In particular, I'm trying to use two Google fonts with TailwindCSS, but don't understand how this works.
I'm using layout.tsx, tailwind.config.js, and globals.css.
layout.tsx:
import { Alegreya_Sans, PT_Sans } from "#next/font/google";
const header = Alegreya_Sans({
subsets: ["latin"],
weight: "500",
});
const body = PT_Sans({
subsets: ["latin"],
weight: "400",
variable: "--body",
});
import "../styles/globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<html lang="en-us" className={`${body.variable} font-body`}>
<head />
<body>
{children}
</body>
</html>
</>
);
}
globals.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Alegreya Sans", sans-serif;
font-weight: 500;
}
}
tailwind.config.js:
const defaultTheme = require("tailwindcss/defaultTheme");
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/app/**/*.{js,ts,jsx,tsx}",
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
body: ["var(--body)", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
In layout.tsx, I'm not using the "header" variable, but it appears from my browser network tab that the page is downloading from Google the "Alegreya Sans" font anyhow.
Is there a way to just call the function without specifying a variable? It wouldn't work unless I declared this "header" variable.
While this appears to work, is it the optimized way to do two fonts? All the documentation shows only a single font, which I suspect is just a way to set a default one via a CSS class or a CSS variable, but I'm not sure.
I'm using Mui5 with SC and I have issues with overriding theme base values.
I have base theme like this for base mui components, for example:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: "1.75rem",
color: "red",
}
}
}
}
});
And now I like to extend the base button with custom colors like this with SC:
const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
return {
fontFamily: theme.xxx,
color: "green"
};
});
This is not working, only the theme defaults are applied.
What's wrong with the implementation or what I'm missing?
BR,
Are you using any other package such as material-ui.
Are all your packages also up to date and have these installed:
"#emotion/css": "^11.9.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.9.1",
"#mui/styled-engine": "^5.8.7",
"#mui/styles": "^5.9.1",
I am using stripe elements and dynamically changing the input styles depending on the theme. It works, but my only problem is if I change the theme whilst being on the page containing the stripe elements input I have to hard refresh the page in order to see the CSS changes.
What I am trying to achieve is to get the styles to change when the theme changes. Please note, I am trying to change the backgroundColor.
Here's what I currently have:
import { useTheme } from "next-themes";
const { resolvedTheme, setTheme } = useTheme();
const CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
backgroundColor: `${resolvedTheme === "dark" ? "black" : "white"}`,
iconColor: "#6D28D9",
color: `${resolvedTheme === "dark" ? "white" : "#9CA3AF"}`,
fontWeight: "500",
fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
fontSize: "16px",
fontSmoothing: "antialiased",
":-webkit-autofill": {
color: "#fce883",
},
"::placeholder": {
color: "#D1D5DB",
},
},
invalid: {
iconColor: "#ef2961",
color: "#ef2961",
},
},
};
<CardElement options={CARD_OPTIONS} />
Another option I have tried is using mount and then passing DARK_CARD_OPTIONS to the Card Element.
Like so:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
const DARK_CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
backgroundColor: "red",
iconColor: "#6D28D9",
color: "white,
fontWeight: "500",
fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
fontSize: "16px",
fontSmoothing: "antialiased",
":-webkit-autofill": {
color: "#fce883",
},
"::placeholder": {
color: "#D1D5DB",
},
},
invalid: {
iconColor: "#ef2961",
color: "#ef2961",
},
},
};
{mounted && (
<div className="p-4 rounded-lg border border-gray-800 dark:border-gray-600 focus:border-purple-700">
{resolvedTheme === "dark" ? (
<CardElement options={DARK_CARD_OPTIONS} />
) : (
<CardElement options={CARD_OPTIONS} />
)}
</div>
)}
For some reason this only makes some areas of the CardElements input change dynamically.
Please see screenshot below (please note I've used red to make it stand out):
You have to forcefully re-mounting the CardElement when the theme changes to get it to work:
<CardElement key={resolvedTheme} options={CARD_OPTIONS} />
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 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);