React-Stripe-Elements element not rendering style as expected - javascript

I'm trying to setup React-Stripe-Elements and while I was able to get the basic form to render, it does so in a really funky looking way. I even tried to add CSS from a form I found online and it won't render in the CardElement properly. How can I get React-Stripe-Elements to render with the proper UI or UI that even remotely resembles the UI on the docs?
The CardElement is currently rendering like:
And my card element file looks like:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<label>
Card details
<CardElement style= {{ base: { color: '#fff',
fontWeight: 500,
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '15px',
fontSmoothing: 'antialiased' }}} />
</label>
);
}
};
export default CardSection;

I'm not sure what your definition of "funky" is - it might be better to add a link to a specific element and state what is different than you expect.
If I were to guess, I would say a few things are probably not as you like:
100% width - I think the package assumes you want a 100% width input. For example, I have all my inputs 100% but they are in containers of the smaller width that I want on the screen.
No border - you can add a border if you like. The input is usually more visible when the page has a background color other than white.
Height or padding - this could be a function of not seeing the true borders.
You can check out some more styling options that they use in their demo here: https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js
This answer might also be helpful https://stackoverflow.com/a/43986418/5049215

Related

React native Modal bypasses expo navigation bar setting

In my App.js i have set :
import * as NavigationBar from "expo-navigation-bar";
...In my component
useEffect(() => {
if (android) {
NavigationBar.setBackgroundColorAsync("transparent");
}
}, []);
which sets my navigation bars transparent in all screens,but when a modal is visible :
<Modal
animationType="none"
transparent
visible={isVisible}
presentationStyle="overFullScreen"
hardwareAccelerated
>
...navigation bar becomes white,even when i try to set it also within my modal component as well,any known solutions for this ?
I had this problem in Android as well. What I believe is happening is the react-native modal is simply taking the default android:navigationBarColor in the styles.xml and so every time it pops up, it overwrites the current navigation bar color until it gets dismissed.
The flag statusBarTranslucent did not work for me.
I was able to fix this by navigating to /res/values/styles.xml in your app or src folder
It really helps if you change your view style to "Android"
then
Then in the AppTheme style I added navigationBarColor to be transparent.
It looks like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">#android:color/black</item>
<item name="android:navigationBarColor">#android:color/transparent</item> // <----This is what I added
</style>
Then in my react native code, I used react-native-navigation-bar-color. I believe this should work with expo-navigation-bar since the main issue is derived from react native modal trying to overlay the default navBarColor value.
import changeNavigationBarColor from "react-native-navigation-bar-color";
const setDarkMode = (isDarkMode: boolean) => {
// logic to change my app's themeProvider to dark mode
changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
};
Hopefully this helps someone!

Next JS v13: How to add font-weight variant of google fonts using #next/font

After Next JS v13, #next/font helps for best performance. Before the package existed, before I used the CDN #import google font in my global CSS
/* path: ./styles/global.css */
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap");
Now I want to migrate and using #next/font#13.0.2
/* path: ./pages/_app.tsx */
import { Poppins } from "#next/font/google";
const poppins = Poppins({
weight: "800", // I want this font-weight has 400,500,600,700,800,900
});
function MyApp({ Component, pageProps }) {
return (
<>
<style jsx global>{`
html {
font-family: ${poppins.style.fontFamily};
}
`}</style>
<Component {...pageProps} />
</>
);
}
I've been try to using array instead:
const poppins = Poppins({
weight: ["400", "500", "600", "700", "800", "900"],
});
but the font used always 400 only
Using CDN on CSS:
Using #next/font#13.0.2:
I want to make the font-weight has 400,500,600,700,800,900 similar like CDN on my CSS.
How to make it work and keep it simple? | Expecting an answer on how to use #next/font to add multiple font weights at once.
Thanks
According to the next docs, you can enter "a range of values if it's a variable font such as '100 900'."
Have you tried something like '400 900', to import all of the weights between 400 and 900 for your case? Or you can pass an array of specific font weights you want.
What fixed it for me was adding display: "block", "swap" or "fallback" as the font-display option, because for the default value "optional" the browser was omitting to set the font and/or the font-weight for some reason (perhaps too long loading time or potential layout shift).
// pages/_app.js
import { Nunito } from "#next/font/google";
const nunito = Nunito({
subsets: ["latin"],
display: "fallback", // <--
});
But, using "block" obviously could make the site feel less fast, and "swap"/"fallback could cause some noticeable layout shifting, so the default behavior of optionally applying fonts is meant to be beneficial for UX and probably not so crucial for websites with "conventional fonts".
Here are more infos on font-display options
Edit: In my case, the cause of this issue was importing non-modular css (e.g. import "swiper/css") somewhere in a deeply nested component, which applied some font-family and/or font-weight styles which caused this unexpected behavior. If you do this too, try converting the css to a css module.

How to change default background color of material-ui

I make a dashboard for my company.
now I want to change some default style's material component.
for example I want to change background of Paper component.
I don't want to add my style for each component or make a new custom component.
In other words, I want to change default style of material components.
Is there any solution?
const theme = createTheme({
palette: {
primary: {
main: "#fffff",
},
secondary: {
main: "#010101",
},
},
});
const App = () => {
return (<ThemeProvider theme={theme}>
.....
</ThemeProvider>);
}
You can look in their documentation.
https://material-ui.com/customization/palette/
https://material-ui.com/customization/theming/
You can change styles like this:
You can change styles directly in the component if you dont want to create separate css file:
<Paper style={{backgroundColor: "red"}}>
this is good for small adjustment, if you add a lot of styles through this it will get messy and it will be hard to read.
2.Or you can add className to your component and create css file and change the styles from there:
<Paper className='papper'>
this is better if you want to add a lot of styles, your styles will be in separate file and it will be easier to read.

react-file-viewer renders any file very small

As much as I have searched about file sizing for react-file-viewer I could not find anything.
I want to use the react-file-viewer to click on a filename hyperlink and open the file (image, document or excel sheeet) in a new page. The rendering works fine, except for the image/document sizing.
I have the following example:
import React from "react";
import FileViewer from "react-file-viewer";
import { Fragment } from "react";
import imGurPic from "./MainBody/imGurPic.ts";
const MainBody = () => {
const file =imGurPic;
const type = "jpeg";
return (
<Fragment>
<FileViewer fileType={type} filePath={file} />
</Fragment>
);
};
export default MainBody;
The imGurPic is an image I picked randomly from imGur because of its large size (3024x4032 pixels) (don't worry it is a cat image... link here... I converted into a base64 string that I use in the filePath prop of the FileViewer component. Ultimately, it will be a base64 string coming from a db as a byte array.
In the following sandbox I managed to create a demo, only to find out that it is WAY too small (72*96px). I do not really understand why it would take so little space. Also, any document or excelsheet I enter, the maximum height is 96px. How can I change it? It seems to inherit from a parent element but the Mainbody takes all the available space between header and footer.
Any help on this will be appreciated.
Here is the sandbox -->sandbox demo
And in case someone cannot open it, here is a screenshot -->
Had to figure this out as well. If you want your image to scale to fit your sizing requirements, just make height=100% in the surrounding div. E.g.
<div style={{ height: '100%' }}>
<ReactFileViewer />
</div>
If you don't want the image scaled at all, then it's a little trickier. I've had to resort to some messy CSS to override the hardwired width and height settings:
.pg-viewer-wrapper {
overflow-y: unset !important;
}
.photo-viewer-container {
width: unset !important;
height: unset !important;
}
.photo-viewer-container > img {
width: unset !important;
height: unset !important;
}
It would be great if this component had features like scaling (e.g. fit, fill, percentage) but I don't think the library is being maintained any more (looking at the old PRs that are still waiting), so would recommend forking and implementing a cleaner solution than what I have done.

decreasing the size of the expansional panel in material ui

I have this requirement where I need to decrease the size of the expansion panel when it is open or say expanded.
I looked into the elements and styles tab but I see that we need to overwrite the styles.
Anyone who has handled this case?
Here is the to the sandbox.
https://codesandbox.io/s/yp9lmvwo1x
I basically want to decrease the size of the blue part in the first accordion.
You can do that by using withStyles HOC provided by material-ui.
const CustomExpansionPanel = withStyles(() => ({
root: {
width: "100%",
},
expanded: {
height: "110px"
}
}))(ExpansionPanel);
However you will also have to tweak the inner ExpansionPanelSummary and ExpansionPanelDetails if you are using them.
Here is a working sample for above : https://codesandbox.io/s/nr65w2qwp4

Categories