I am currently trying to customize Antd theme by using the antd and less plugins for Gatsby. Following this thread - Change the Theme of Antd when using GatsbyJS
gatsby-config.js plugins contain
{
resolve: 'gatsby-plugin-antd',
options: {
style: true
}
},
{
resolve: `gatsby-plugin-less`,
options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#BADA55'
}
}
}
gatsby-node.js and relevant modules are filled as seen in the thread.
When I look at an element in the browser debugger, the button uses the base theme, but the specified theme is actually there (just being overridden).
I had the same issue and for me it was that I had somewhere in my code imported the style for antd
import "antd/dist/antd.css"
Related
I am currently using ReactJS(TypeScript) with TailwindCSS to create some forms, and I want my Submit button to use one of the yellow colors that come with Tailwind. However, when I have my react project running and I update the value to bg-yellow-300 , it will turn yellow, but when I first launch the react app, the button has its default color scheme, which I don't want. I've provided the code for the button below, and my config file:
<Button className="w-1/12 bg-yellow-300 hover:bg-yellow-400 text-black-100" type="submit">
Submit
</Button>
Config File:
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{js,jsx,ts,tsx}", 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
"gold":"#edcd37",
"babyblue":"#298ge5",
},
},
},
plugins: [
require('flowbite/plugin')
],
}
I've tried adding the JIT(Just in time) setting to see if for some reason that was why it wasn't giving the correct color on initial loading, but it didn't work either.
I am working on magento 2 PWA using react and tailwind but all the classes in tailwind I can use but can't use hover.
Here is my tailwind.config.js:
// TODO #TW:
// Node path should be committed, but it makes preset dev impossible.
// Local path is the only way to develop "tailwind.preset.js".
const venia = require('#magento/pwa-theme-venia');
const config = {
mode: 'jit',
// Include your custom theme here.
presets: [venia],
// Configure how Tailwind statically analyzes your code here.
// Note that the Tailwind's `jit` mode doesn't actually use PurgeCSS.
purge: {
// Include paths to every file that may refer to Tailwind classnames.
// Classnames not found in these files will be excluded at build time.
content: [
'./src/**/*.{html,js}',
'./node_modules/#magento/venia-ui/lib/**/*.module.css',
'../venia-ui/lib/**/*.module.css',
'./src/**/*.module.css',
'./template.html'
],
theme: {
extend: {},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
}
},
// Extract Tailwind classnames from source files.
// Our default matcher only matches targets of CSS Modules' `composes`,
// not classnames included directly in HTML or JS!
extractors: [
{
extensions: ['css', 'scss'],
extractor: content => content.match(matcher) || []
}
]
},
// Set the character Tailwind uses when prefixing classnames with variants.
// CSS Modules doesn't like Tailwind's default `:`, so we use `_`.
separator: '_'
};
module.exports = config;
/**
* Matches declarations that contain tailwind classnames.
* Only classnames matched by this expression will be included in the build.
*
* #example
* .foo {
* composes: mx-auto from global;
* }
*/
const matcher = /(?<=composes:.*)(\b\S+\b)(?=.*from global;)/g;
here is my postcss.config.js:
module.exports = {
plugins: [
require('autoprefixer'),
require('tailwindcss')('./tailwind.config.js')
]
};
How can I fix this issues???? Thank you so much!
I'm using the following versions:
"gatsby": "^4.21.1",
"gatsby-plugin-mdx": "^4.0.0",
"gatsby-remark-images": "^6.21.0",
"remark-unwrap-images": "^3.0.1",
And I have the following in place as part of my gatsby-config.js:
{
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-images",
options: {
linkImagesToOriginal: false,
backgroundColor: "transparent",
},
},
],
mdxOptions: {
remarkPlugins: [wrapESMPlugin("remark-unwrap-images")]
}
},
},
Then in my code I make use of the MDXProvider to override the rendering of some components like so:
<MDXProvider components={{ img: SomeComponent }}>
{children}
</MDXProvider>
Before upgrading to use the latest versions of gatsby-plugin-mdx and gatsby-remark-images this used to work nicely and I'd end up with my custom component being rendered correctly.
Since the update I'm finding that an extra div is wrapping the image which appears to be coming from gatsby-remark-images (although looking at the source code I can't see how or where).
As a result, this changes the behaviour of MDXProvider since it now thinks it's a div instead of an img which is a problem.
Has anyone encountered this or have a suggestion on how to resolve it?
Note: This is not the same as the issue with images getting wrapped in p Which can be resolved by using remark-unwrap-images per my gatsby-config.js as shown above. Also, further to this gatsby-remark-figure-caption does not appear to work in gatsby 4+.
I want to remove media and typography section in the "grapesjs-blocks-bootstrap4" plugin. How can I do that?
plugins: ["gjs-blocks-basic","grapesjs-blocks-bootstrap4"], pluginsOpts: {"gjs-blocks-basic": {},"grapesjs-blocks-bootstrap4":{} },
I'm building a complete custom Material UI theme using global overrides as recommended here: https://material-ui.com/customization/components/#global-theme-override
Example:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontSize: '1rem',
},
},
},
});
My question is how do I get a copy of the Material UI documentation with my custom theme applied? https://material-ui.com/getting-started/installation/
Some considerations:
I want the Material UI docs to be updatable (i.e. follow the latest release)
Essentially an exact copy of the Material UI docs wrapped in my custom theme
Any help here would be greatly appreciated!
Came across this mui-theme-creator from MUI's latest documentation https://mui.com/customization/theming/#theme-builder which would help.
However, this is not yet on v5.