আমি কীভাবে উপাদান-ইউআই পরিচালিত শৈলীগুলি অ-উপাদান-ইউআই, অ-প্রতিক্রিয়া উপাদানগুলিতে প্রয়োগ করব?

9

আমার একটি অ্যাপ্লিকেশন রয়েছে যেখানে আমি মেটেরিয়াল ইউআই এবং এর থিম সরবরাহকারী (জেএসএস ব্যবহার করে) ব্যবহার করছি।

আমি এখন ফুলক্যালেন্ডার-প্রতিক্রিয়াটি অন্তর্ভুক্ত করছি , যা সত্যিই সম্পূর্ণরূপে প্রতিক্রিয়াপ্রাপ্ত লাইব্রেরি নয় - এটি মূল ফুলক্যালেন্ডার কোডের চারপাশে কেবল একটি পাতলা রিএ্যাক্ট উপাদান র‌্যাপার pper

এর অর্থ এটি, এটির উপাদানগুলিকে কীভাবে স্টাইল করে তা নিয়ন্ত্রণ করতে প্রপস রেন্ডার মতো জিনিসগুলিতে আমার অ্যাক্সেস নেই।

তবে এটি আপনাকে ডওম উপাদানগুলিতে সরাসরি কলব্যাকের মাধ্যমে অ্যাক্সেস দেয় যা যখন তাদের রেন্ডার করে তখন ডাকা হয় (যেমন: ইভেন্টরেন্ডার পদ্ধতি )।

এখানে একটি বেসিক ডেমো স্যান্ডবক্স রয়েছে।

এখন আমি যা করতে চাই তা হ'ল সম্পূর্ণ ক্যালেন্ডার উপাদানগুলি তৈরি করুন (যেমন, বোতামগুলি) একই চেহারাটি ভাগ করুন এবং আমার অন্যান্য অ্যাপ্লিকেশনটির মতো অনুভব করুন।

এটি করার একটি উপায়, এটি হ'ল আমি নিজে সমস্ত শৈলীর ওপরে রাইড করতে পারি শ্রেণীর নামগুলি ব্যবহার করে এবং সেই অনুসারে শৈলীটি প্রয়োগ করে।

বা - আমি একটি বুটস্ট্র্যাপ থিম বাস্তবায়ন করতে পারি - তাদের ডকুমেন্টেশনের পরামর্শ অনুসারে।

তবে এই সমাধানগুলির যে কোনও একটির সাথে সমস্যাটি হ'ল:

এটা অনেক কাজ হবে
আমার সিঙ্ক্রোনাইজেশন সমস্যা হবে, যদি আমি আমার এমইউআই থিমটিতে পরিবর্তন করে এবং ক্যালেন্ডার থিম আপডেট করতে ভুলে যাই তবে তারা অন্যরকম দেখায়।

আমি যা করতে চাই তা হয়:

ম্যাজিকালি এমইউআই থিমকে বুটস্ট্র্যাপ থিমে রূপান্তর করুন।
অথবা এমইউআই ক্লাসের নাম এবং ক্যালেন্ডার শ্রেণীর নামগুলির মধ্যে একটি ম্যাপিং তৈরি করুন, এরকম কিছু:

.fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained
.fc-button-primary= .MuiButton-containedPrimary

এটি নির্বাচিতদের ইত্যাদির কাজ করার জন্য ম্যাসেজ করার বিষয়ে আমার আপত্তি হবে না (উদাহরণস্বরূপ - এমইউআই বোতামগুলির দুটি অভ্যন্তরীণ স্প্যান রয়েছে, যেখানে পূর্ণ ক্যালেন্ডারে মাত্র একটি রয়েছে)। এটি বেশিরভাগ ক্ষেত্রেই আমি থিমটি পরিবর্তন করি - এটি দুটি জায়গায় পরিবর্তন করতে চাই না।

সাস এর মতো কিছু ব্যবহার করে এটির @extendবাক্য গঠনটি আমার মনে রাখে। আমি সাসের সাথে সহজেই যথেষ্ট ক্যালেন্ডার সিএসএস তৈরি করতে পারি - তবে সাস কীভাবে মুই থিমটিতে অ্যাক্সেস পাবেন?

সম্ভবত আমি বিপরীত পদ্ধতি গ্রহণ করতে পারি - এমইউআইকে বলুন 'আরে এই শ্রেণীর নামগুলি এই এমইউআই ক্লাসগুলির মতো স্টাইল করা উচিত'।

আমি কীভাবে এটিকে সমাধান করব তা সম্পর্কে কোনও দৃ concrete় পরামর্শ?

— dwjohnston
সূত্র

4

এখানে আমার পরামর্শ (স্পষ্টতই, এটি সরাসরি এগিয়ে নেই) is MUI থিম থেকে শৈলীগুলি নিন এবং styleএটি ব্যবহারের উপর ভিত্তি করে ট্যাগ উত্পন্ন করুন react-helmet। এটি সুন্দরভাবে ইভেন্টটি করতে, আমি একটি "মোড়ক" উপাদান তৈরি করেছি যা মানচিত্রটি করে। আমি কেবল প্রাথমিক নিয়মটি প্রয়োগ করেছি তবে এটি অন্য সকলের কাছেও বাড়ানো যেতে পারে।

এইভাবে, থিমটিতে আপনি যে কোনও পরিবর্তন করবেন তা ম্যাপ করা নির্বাচকদেরও প্রভাব ফেলবে।

import React from "react";
import { Helmet } from "react-helmet";

export function MuiAdapter({ theme }) {
  if (!theme.palette) {
    return <></>;
  }
  return (
    <Helmet>
      <style type="text/css">{`
          .fc-button-primary {
            background: ${theme.palette.primary.main}
          }
          /* more styles go here */
      `}</style>
    </Helmet>
  );
}

এবং অ্যাডাপ্টার ব্যবহার

<MuiAdapter theme={theme} />

কার্যকারিতা ডেমো: https://codesandbox.io/s/reverent-mccarthy-3o856

— মোশ ফিউ
সূত্র

আমি এই চিন্তা পছন্দ। এই সমাধানটির সমস্যাটি হ'ল আপনি এখনও মূলত সমস্ত শৈলী নিজেই প্রয়োগ করছেন (যেমন, হোভার রঙ, প্যাডিং, সীমানা ব্যাসার্ধ ইত্যাদি)। উদাহরণস্বরূপ, আপনি সিদ্ধান্ত নিয়েছেন বোতামের পাঠ্যটি আন্ডারলাইন করা উচিত, আপনার text-decorationহেলমেটে সম্পত্তি যুক্ত করার কথা মনে রাখা দরকার ।

— dwjohnston

আপনি যা চেয়েছেন তা আমি বুঝতে পারি। আমি আলাদা পদ্ধতি গ্রহণ করার চেষ্টা করেছি এবং এমইউআই styleট্যাগগুলি পরিচালনা করে এবং .fc-মানচিত্র অনুসারে তাদের নির্বাচকদের যুক্ত করার চেষ্টা করেছি তবে তাদের বেস স্তরে দ্বন্দ্ব রয়েছে (যেমন display, paddingইত্যাদি) তাই আমি দেখতে পাচ্ছি না যে আপনার কাজটি থাকলেও এটি কীভাবে কাজ করবে scss এ এটি স্থানান্তরিত করার বিকল্প। উদাহরণস্বরূপ: কোডস্যান্ডবক্স.আইও

— মোশ ফিউ

হাহাহা - এখন এই আমার পছন্দ। আমি পরে এটি আরও ভাল চেহারা দিতে হবে।

— dwjohnston

3

আপনি চোখ বুলিয়ে Mùi বর্গ নাম এবং ক্যালেন্ডার বর্গ নামের মধ্যে একটি ম্যাপিং তৈরি করতে পারে নি refএর। এটি সম্ভব যে কেউ কেউ "সেরা অনুশীলন" বলবেন না ... তবে এটি একটি সমাধান :)। মনে রাখবেন যে আমি আপনার উপাদানটি একটি কার্যকরী উপাদান থেকে একটি শ্রেণীর উপাদানতে আপডেট করেছি, তবে আপনি কার্যক্ষম উপাদানটিতে হুক দিয়ে এটি সম্পন্ন করতে পারেন।

রেফার যোগ করুন

একটি যোগ করুন refআপনার ক্ষেত্রে Mùi উপাদান আপনি একটি রেফারেন্স হিসেবে সেট করতে চান চাই, Button।

<Button
  color="primary"
  variant="contained"
  ref={x => {
    this.primaryBtn = x;
  }}
>

আর refএকটি মোড়ানো করার divউপাদান আপনি ম্যাপ করতে চান প্রায়। আপনি এটি সরাসরি উপাদানগুলিতে যুক্ত করতে পারবেন না কারণ এটি আমাদের অ্যাক্সেস দেয় না children।

<div
  ref={x => {
    this.fullCal = x;
  }}
>
  <FullCalendar
    ...
  />
</div>

মানচিত্র ক্লাস

থেকে componentDidMount()অ্যাড যাই হোক না কেন যুক্তিবিজ্ঞান আপনি সঠিক DOM নোড লক্ষ্য করতে হবে (আপনার ক্ষেত্রে জন্য, আমি জন্য যুক্তিবিজ্ঞান যোগ typeএবং matchingClass)। তারপরে সমস্ত ফুলক্যালেন্ডার ডিওএম নোডগুলিতে সেই যুক্তিটি চালান এবং classListসেই ম্যাচের যে কোনওটিকে প্রতিস্থাপন করুন ।

componentDidMount() {
  this.updatePrimaryBtns();
}

updatePrimaryBtns = () => {
  const children = Array.from(this.fullCal.children);
  // Options
  const type = "BUTTON";
  const matchingClass = "fc-button-primary";

  this.mapClassToElem(children, type, matchingClass);
};

mapClassToElem = (arr, type, matchingClass) => {
  arr.forEach(elem => {
    const { tagName, classList } = elem;
    // Check for match
    if (tagName === type && Array.from(classList).includes(matchingClass)) {
      elem.classList = this.primaryBtn.classList.value;
    }

    // Run on any children
    const next = elem.children;
    if (next.length > 0) {
      this.mapClassToElem(Array.from(next), type, matchingClass);
    }
  });
};

এটি সম্ভবত কিছুটা ভারী হাতে রয়েছে তবে আপনি যখন মেটেরিয়াল ইউআই আপডেট করবেন তখন এটি আপনার ভবিষ্যতের প্রমাণের প্রয়োজনীয়তা পূরণ করে। classListএটি আপনাকে কোনও উপাদানের কাছে পাঠানোর সাথে সাথে এটি পরিবর্তন করতে দেয় , যার সুস্পষ্ট সুবিধা রয়েছে।

আদেশ সহকারে

যদি FullCalendarআপনার টার্গেট করা উপাদানগুলিতে 'ম্যাপড-টু' উপাদান ( ) ক্লাস আপডেট হয় (যেমন এটি .is-selectedকোনও বর্তমান বোতামে যুক্ত হয়েছে) বা মাউন্ট করার পরে নতুন বোতাম যুক্ত করে থাকে তবে আপনাকে প্রাসঙ্গিক পরিবর্তনগুলি ট্র্যাক করে পুনরায় চালনার উপায় খুঁজে বের করতে হবে যুক্তিটা.

আমার আরও উল্লেখ করা উচিত যে (স্পষ্টতই) পরিবর্তিত ক্লাসগুলির ব্রেকিং ইউআইয়ের মতো অযৌক্তিক পরিণতি হতে পারে এবং কীভাবে সেগুলি ঠিক করতে হয় তা আপনাকে খুঁজে বের করতে হবে।

এখানে কার্যক্ষম স্যান্ডবক্সটি রয়েছে: https://codesandbox.io/s/determined-frog-3loyf

— sallf
সূত্র

1

এইটা কাজ করে. নোট করুন যে আপনাকে কোনও শ্রেণীর উপাদানতে রূপান্তর করতে হবে না - আপনি এটি করতে হুক ব্যবহার করতে পারেন।

— dwjohnston

ইয়া আপনি সঠিক, এটি একটি কার্যকরী উপাদান হুক দিয়ে সম্পন্ন করা যেতে পারে। আমি প্রতিফলিত উত্তর আপডেট করেছি।

— সল্ফ

ভাল, বেশ ব্যবহারিক পদ্ধতির। তবে আপনার পক্ষে সর্বদা একটি রেফের প্রয়োজন হবে বলে এটি সত্যই সম্ভব নয়।

— অনিকেত চৌধুরী