Customization

You must add !important add the end of each file so that your styles take a higher precedence then ours.
Check out the example below.
Custom class names
You can customize / white-label the exported Form component using these specific class names
1. df-sdk-create-btn
Add CSS styles like this: 
src/views/Farm.css
.df-sdk-create-btn {
  background: #0275d8 !important;
}
And import them into component page like this:
src/views/Farm.tsx
import { CreateFarm } from "@cryption/dapp-factory-sdk";
import "./Farm.css"; // imported CSS file
​
const Farm = () => {
  return <CreateFarm />;
};
export default Farm;
Result: 
Similar to this example you can style other buttons with classes like:
2. df-sdk-next-btn
3. df-sdk-previous-btn
4. df-sdk-cancel-btn
5. df-sdk-confirm-create-btn
6. df-sdk-form-container
src/views/Farm.css
.df-sdk-form-container {
  background: #0275d8 !important;
}
7. df-sdk-card-container
​
You can customize / white-label the exported Button component using this class.
1. df-sdk-single-btn
src/views/Farm.css
.df-sdk-single-btn {
  background: #ffffff !important;
  border: 2px solid #0275d8 !important;
  color: #0275d8 !important;
}
src/views/Farm.tsx
import { CreateFarmButton } from "@cryption/dapp-factory-sdk";
import "./Farm.css";
​
const Farm = () => {
  return <CreateFarmButton />;
};
export default Farm;
Custom Gradients
 Both Form as well as Button components accept a prop customGradient : string to customize the gradient styles present throughout the component
Eg: 
src/views/Farm.tsx
import { CreateFarm, CreateFarmButton } from "@cryption/dapp-factory-sdk";
​
const Farm = () => {
  return (
    <>
      <CreateFarmButton
        title="Create new Farm"
       customGradient="linear-gradient(to right, red, yellow)"
      />
      <CreateFarm customGradient="linear-gradient(to right, red, yellow)" />
    </>
  );
};
export default Farm;